问题标签 [ionicons]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
565 浏览

angular - NPM 更新后 Ionicons 不工作 Ionic V4

我遇到了一些未显示的 Ionicons 的问题,但现在它们都没有显示在我的测试环境中。他们都没有
我的 angular.json 看起来像这样:

我已经执行 npm install 和 npm update 没有成功。
查看错误截图

在此处输入图像描述

谢谢!

编辑:

这是我的 package.json

好像还是V4,要不要升级到5?

谢谢!

0 投票
2 回答
289 浏览

ionic-framework - Ionic 4 中的 ion-searchbar 在浏览器控制台上抛出未找到图标的错误

我正在尝试ion-searchbar在我的Ionic 4应用程序中实现。

但是,它会在浏览器控制台中引发以下错误。我无法在搜索栏中显示明文图标。

请注意我有这两个脚本文件index.html

谁能帮忙。

0 投票
0 回答
198 浏览

html - 在移动应用上滚动时离子元素被切断

我在 ion-fab 元素中有三个按钮,在我向下滚动应用程序后,它们会在不同级别被切断。

这是其中之一的 HTML 示例ion-fab button

这个的父元素是ion-content标签。以下是与这些按钮相关的任何 CSS:

只有在我单击应用程序上的其他位置后,它才会恢复正常。我附上了一张图片,以显示按钮在不同级别被切断,我在应用程序上滚动到哪里都没有关系(它并不深)。当然,顶部是它们应该是什么样子,底部是它们可以被切断的程度。有人对为什么会这样有任何想法吗?

0 投票
2 回答
3248 浏览

html - 当我将鼠标悬停在 ionic 提供的 github-logo 上时,如何覆盖标题“ionicons-v5_logos”

我正在尝试将 ionic (v5) 的 GitHub 徽标嵌入到我的项目中,该项目重定向到我制作的项目的 GitHub 存储库。

该徽标有一个令人讨厌的标题“ionicons-v5_logos”,当我将鼠标悬停在该图标上时会出现该标题。如何删除徽标的标题?我试图通过在 HTML 中编写以下代码来删除徽标的现有标题(但它似乎没有删除 ion-icon 上的标题) -

我尝试使用aria-label,aria-hiddenariaLabel属性来设置/隐藏离子图标的标题,但没有任何效果。谁能指导我删除离子图标的标题?

0 投票
3 回答
2243 浏览

html - 无法更改 Ionicon 5 轮廓集的描边颜色

我正在尝试为 Ionicons 5 的轮廓版本着色,但有用于描边和填充的内联样式。我尝试使用一个类来定位图标并设置填充和描边颜色,以及仅使用颜色属性。使用 CSS color 属性填充颜色,但对笔画没有影响。如果我设置笔触颜色并检查,它会被内联笔触属性值覆盖。

有没有办法覆盖这种风格?我可以使用 CSS 进入并抓取子路径或笔划,以便我可以覆盖默认为 Ionicons 的 SVG 笔划颜色吗?

HTML

<ion-icon class="ico-top" name="pizza-outline"></ion-icon>

CSS

和属性适用于部分图标colorfill但不会覆盖内联笔画值。任何帮助将非常感激。谢谢!

0 投票
6 回答
6437 浏览

ionic-framework - Ionic-Vue Ionicons 5.xx 不显示图标

我将 ionic-vue 与 ionicons 5.0.1 一起使用,但在通话后

我正在关注https://dev.to/aaronksaunders/build-your-first-ionic-vue-app-18kjhttps://github.com/ionic-team/ionic/issues/19078教程,但卡住和图标在 FAB 中无法显示。这是我的语法,谢谢你的帮助。

结果 FAB 不显示图标“添加”:

在此处输入图像描述

0 投票
0 回答
49 浏览

html - 在某些情况下不显示离子图标

我正在尝试为我的照片库应用程序中的每个图像添加一个心脏离子图标。这最终将允许用户喜欢该图像。正如您从下面的第一张图片中看到的那样,除了两个之外,每张图片都添加了心形图标,我不知道为什么?

在此处输入图像描述

同样在下面的第二张图片中,您可以看到心脏被添加到没有任何图像的页面中。我也能理解为什么会这样?

在此处输入图像描述

这是将图标添加到 html 代码的位置:

我正在使用 Angular,所以这是添加组件选择器的地方:

这是相关的CSS代码:

0 投票
1 回答
350 浏览

reactjs - 在 Laravel React 应用程序中使用 Ionicons 5

我尝试使用 CDN 并且 CDN 工作正常,但我想从节点模块中使用它,并且当我尝试这样做时:

我在控制台中收到此错误:

由于错误很明显,并且没有从节点模块提供文件。我能够导入 SVG 图像,但由于我无法将颜色更改为 SVG 图像。我确实想要脚本中的 js 模块。

0 投票
1 回答
444 浏览

reactjs - React 中选择选项中的 Material Design 和 Ionicons

如何在选择下拉菜单中添加图标?

我的代码是:

我得到的不是图标,而是 [object Object]。 截屏

我试图将 MD 图标作为网络字体,如下所述:https ://dev.materialdesignicons.com/getting-started/webfont但我也得到了 [object Object]。

任何想法如何做到这一点?

0 投票
0 回答
143 浏览

javascript - 在 vue.js 中使用 ionicons 5

我想在我的vue.js项目中使用ionicons 5 。

如果我使用:

一切正常,但我想像使用任何其他 npm 包一样使用它,并使用 webpack 将它与我的其他模块捆绑在一起。

我应该怎么办?

在 vue.js 项目中使用 ionicons 5 的正确方法是什么(不使用脚本标签和链接到 cdn

font awesome提供了一个官方的 vue.js 组件:

https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs