我正在使用 Semantic 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 文件中挖掘显示字体需要位于此处（相对于您的语义.css）：themes/default/assets/fonts/
来源： https ://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/css/semantic.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/icon.min.css'>
</head>
<body>
<h1>Icon Example</h1>
<a class="item"><i class="alarm icon"></i>Notifications</a>
<a class="item"><i class="mail outline icon"></i>Messages</a>
</body>
</html>您可以尝试查看上面的代码段。您也可以使用以下链接解决其他类似问题：
你不需要使用任何其他库的font-awesome 先尝试cdn 官方icon.min.css
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>
有时这不起作用所以你可以做的是去语义-ui官方页面 下载语义ui zip文件夹并在组件文件夹中解压缩你可以找到icon.min.css
在index.html中包含该文件
<link rel="stylesheet" href="icon.min.css">
尝试显示那些图标Official docs
<i class="disabled users icon"></i>
请享用
我的解决方案非常简单（一旦我解决了）。我已经编辑themes.config以使用我的新（尚未构建）主题。如您所知，它回退到default一切似乎都正常。
/* Elements */
:
@flag : 'supernewtheme';
@header : 'supernewtheme';
@icon : 'supernewtheme';
@image : 'supernewtheme';
@input : 'supernewtheme';
:
即使控制台显示图标字体加载（没有 404），它也没有工作。我还检查了字体在我的build文件夹中的正确位置，它是。
将主题改回defaultfor@icon就可以了：
@icon : 'default';
如果有人在使用电子或任何其他 JavaScript 框架。这可能对你有用。正确设置语义后的电子图标未显示。该错误不在语义上，也不在加载中。错误在于光子和语义组合。我使用带有语义的光子来使我的 UI 看起来很棒。我选择的基本解决方案是参考这个官方错误报告。同样在我的 UI 图标中没有出现下拉菜单，所以我使用控制台解决了
.myclass .icon:before, .myclass.icon-before {
font-family: 'dropdown';
}
希望能帮助到你。