Html 语义UI图标字体未加载

我正在使用语义UI CSS框架构建一个网站，现在我想使用它的一些图标

以下是HTML：

<h1>Title<i class="lab icon"></i></h1>

标题

我已经链接了semantic.css，但是我想我还需要做些别的事情来让图标正常工作？我也尝试过将此链接：

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

---

但它仍然不起作用。我遗漏了什么？

在语义CSS文件中挖掘发现字体需要位于此处（相对于您的semantic.CSS）：

themes/default/assets/font/

资料来源：

图标示例
通知
信息

我的解决方案非常简单（一旦我解决了）。我编辑了

themes.config

，以使用我的新主题（尚未构建）。正如您所知，它返回到默认值，所以一切似乎都正常

/* Elements */
:
@flag       : 'supernewtheme';
@header     : 'supernewtheme';
@icon       : 'supernewtheme';
@image      : 'supernewtheme';
@input      : 'supernewtheme';
:

即使控制台显示图标字体加载（no 404），iti也无法工作。我还检查了字体是否在我的

build

文件夹中的正确位置，是否正确

将

@icon

的主题更改回

默认值

，实现了以下目的：

@icon       : 'default';

---

您不需要使用任何其他库的字体 试试cdn第一官方网站

有时候这不管用，所以你能做的就是 去 下载语义ui zip文件夹并解压缩 在组件文件夹中，您可以找到icon.min.css

将该文件包括在index.html中

    <link rel="stylesheet" href="icon.min.css">

尝试显示这些图标

---

如果有人正在使用electron或任何其他JavaScript框架，请尽情享受。 这可能对你有用。 正确设置语义后，电子中的图标未显示。错误不在语义或加载中。错误在于光子和语义的结合。我使用photon和语义使我的UI看起来很棒。 我选择的基本解决方案是参考官方的错误报告。 而且在我的UI中，图标并没有出现在下拉列表中，所以我使用控制台来解决类似的问题

.myclass .icon:before, .myclass.icon-before {
    font-family: 'dropdown';
}

---

希望有帮助。

不完全是。它与semantic.min.css并行。否则，您也可以通过外部样式表更改字体文件夹路径。更新了链接和位置（它们已更改），谢谢。根据我的情况，我必须将

主题

文件夹放入

css

文件夹。检测路径的简单方法：使用Chrome打开网站，检查元素-网络，查找卸载的字体url。如果这不是一个选项，我们真的要查找/替换该字符串吗？@DitmarWendt Yes，除非您想根据对web服务器的控制程度创建某种URL重定向。将示例更新为

2.2.13

版本会显示更多类似id卡的图标。

<i class="disabled users icon"></i>

.myclass .icon:before, .myclass.icon-before {
    font-family: 'dropdown';
}