问题标签 [icomoon]

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 投票
1 回答
388 浏览

html - 如何通过属性设置伪元素的图标内容?

我正在使用 icomoon 作为我的图标库

我正在尝试通过属性动态设置图标data-icon

但似乎无法将内容识别为使用attr(data-icon).

有没有办法\e92c使用字符而不是字符串文字attr()

0 投票
2 回答
7035 浏览

react-native - 将自定义图标导入 React Native 0.62

我正在尝试在我的React Native 0.62.2应用程序中导入和使用我自己的自定义图标。

我按照这里概述的步骤https://github.com/oblador/react-native-vector-icons#custom-fonts但到目前为止图标没有出现。

以下是我遵循的步骤:

  1. 创建我的图标集并将其转换为https://icomoon.io上的字体
  2. 从下载 zip 文件IcoMoon并将ttf文件放入./src/assets/fonts文件夹
  3. 然后我创建了react-native-config.js文件并放置在根目录中。此文件中的代码在下面
  4. 在我的组件文件夹下,我创建了CustomIcon.js——见下面的代码
  5. 我还将下载的selection.json文件中包含的文件放在与zipIcoMoonCustomIcon.js
  6. 然后我使用CustomIcon如下所示

所以这里的代码是什么样的:

react-native-config.js文件如下所示:

CustomIcon.js文件如下所示:

这是我使用图标的方式:

当我在 中运行应用程序时Android Emulator,我看到缺少的图标符号,即一个带有 X 的框。

知道这里有什么问题吗?

0 投票
1 回答
994 浏览

blazor-client-side - Icomoon,开放标志性 SVG 图标未显示在 blazor 页面中

我正在尝试在我的 blazor 项目中使用Icomoon 。我已经下载了图标。

HTML

CSS

SVG 文件的位置

在此处输入图像描述

我得到的结果

在此处输入图像描述

我错过了什么吗?我认为遵循了文档中所说的内容。

感谢您的帮助

编辑

在本文档中说 svg 图标可以用作这样的图像:

像这样使用时,它正在显示。

将它用作图像的唯一问题是我无法设置它的样式。所以,最后,我还是被卡住了。

编辑 2

我试图实现这篇博文中的建议。图标正在显示,我仍然无法设置它们的样式。

0 投票
0 回答
344 浏览

react-native - 带有 fontello 的自定义图标不起作用 React Native

嗨,我正在尝试按照在线类似教程实现自定义图标,但使用不同的方法一直遇到相同的问题。首先,我将 svg 上传到 fontello 服务。然后我将 .ttf 文件放入我的 assets/fonts 文件夹中。然后我将 config.json 文件放在我的 src 基本文件夹中。最后,我将它们链接起来,甚至检查了构建阶段设置以确保它在 xcode 中。但是,该图标没有显示以下代码,而是在一个白框内显示一个问号。我应该做什么?

0 投票
1 回答
172 浏览

css - IconMoon 字体导出问题

我用 IconMoon 网站创建了一个小图标字体。当我导入我的网站时,它工作正常,但图标显示倾斜。我该如何解决?

原图标:

在此处输入图像描述

显示的图标:

在此处输入图像描述

我将此代码添加到来自 Font Awesome 的 all.min.css 中:

我在 html 上的代码:

0 投票
0 回答
18 浏览

html - CSS 变换 + Icomoon

我有以下按钮

...我试图像这样水平翻转图标:

我还display: inline-block;根据[class^="icon-"], [class*=" icon-"]我在此处的另一篇文章中阅读的内容添加了内容。

但是当我在浏览器中查看时,图标没有翻转。我也尝试过转换父.icon容器,但没有运气

0 投票
1 回答
36 浏览

wordpress - 在 wordpress 页面模板中访问 Vue 应用程序中的字体资源

除非我真的找不到答案,否则我尽量不发布问题,但恐怕现在就是这种情况。

我正在运行一个项目,其中 Vue 应用程序部署在 wordpress 网站的页面中。到目前为止一切顺利,集成有点复杂,但现在是。

该应用程序嵌入了排队的脚本和样式:

我可以通过使 wordpress 主题目录可用来解决从 javascript 访问应用程序资产的问题:

我花了一些时间才知道,所以我希望它对某人有所帮助。

我在尝试加载一些字体时被困住了。我将这些字体导入到 scss 中,如下所示:

这样我的 Vue 应用程序就可以编译,没问题,如果我“独立”运行应用程序,而不是嵌入到 wordpress 页面中,它会找到字体。但是在 wp 页面中,它会在文件夹 /fonts/ 中搜索字体,但它应该转到 /wp-content/themes/mytheme/myapp/dist/fonts ...

¿在部署到 wordpress 时,如何使它使用不同的资产路径?

提前致谢!

0 投票
1 回答
96 浏览

svg - 关节:如何将 icomoon 图标包含到 rappid 的自定义形状中

我正在为 HTML 图表工具使用Rappid框架。我dia.Element使用以下示例使用 rappid 的命名空间制作了自定义形状。无论如何,图像使用 SVG 可以正常工作,但我想改用icomoon/font-awesome图标。

在这里,我attr在 appLogo 上使用了 on custom 元素:

标记是这样的:

任何帮助将不胜感激。谢谢。

0 投票
0 回答
75 浏览

reactjs - 图标字体并不总是在反应应用程序中正确加载

我将 icoomoon 字体连接到我的 react 应用程序,并且在我的本地环境中一切正常,但是在 AWS 上部署应用程序后,有时图标不会加载到应用程序中(我想编码存在一些问题)。有一个类似的问题但我不明白我应该如何不缓存字体文件。

0 投票
0 回答
53 浏览

svg - 使用 IconMoon 应用自定义 Awesome 字体

这是我第一次尝试创建自定义“真棒字体”。更具体地说,我想使用当前很棒的字体并使用我创建的一些新的自定义 svg 图标来扩展其内容。

将自定义图标添加到字体真棒

在搜索时,我遇到了上面建议使用 IcoMoon 应用程序的主题。即使我已经创建了我的自定义 svg 文件。我无法理解如何使用 IconMoon 应用程序,因为我看到它只创建库,而不是令人敬畏的字体与其他自定义图标一起运行所需的代码。

真棒字体具有以下元数据:

有谁知道使用 IcoMoon 应用程序必须使用什么过程才能创建功能性自定义“真棒字体”?我期待着您可能拥有的任何有见地的信息!