Html 语义 UI 图标-字体未加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21206491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Semantic UI Icons-font not loading
提问by fgblomqvist
I am building a website using the Semantic UI CSS framework, and now I want to use some of its icons.
我正在使用 Semantic UI CSS 框架构建一个网站，现在我想使用它的一些图标。
Here is the HTML:
这是 HTML：
<h1>Title<i class="lab icon"></i></h1>
I have linked the semantic.css, but I assume I need to do something else too to get the icons working? I tried linking this too:
我已经链接了semantic.css，但我认为我还需要做其他事情才能使图标正常工作？我也尝试链接这个：
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
But it still doesn't work. What am I missing?
但它仍然不起作用。我错过了什么？
回答by fgblomqvist
Digging in the semantic CSS file reveals that the fonts need to be located here (relative to your semantic.css): themes/default/assets/fonts/
挖掘语义 CSS 文件显示字体需要位于此处（相对于您的语义.css）： themes/default/assets/fonts/
Source: https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467
来源：https: //github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467
回答by David Charles
<!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>you can try taking a look at the above snippet. You may also use the below link for other similar issues:
您可以尝试查看上面的代码段。您也可以使用以下链接解决其他类似问题：
回答by MD SHAYON
You don't need to use font-awesome of any other library try cdn first Official icon.min.css
你不需要使用任何其他库的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'>
somethimes this doesn't work so what you can do is go semantic-ui official pagedownload semantic ui zip folder and extract in component folder you can find icon.min.css
有时这不起作用所以你可以做的是去语义ui官方页面下载语义ui zip文件夹并在组件文件夹中解压缩你可以找到icon.min.css
include that file in index.html
在index.html 中包含该文件
<link rel="stylesheet" href="icon.min.css">
try to display those icon Official docs
尝试显示那些图标官方文档
<i class="disabled users icon"></i>
ENJOY
请享用
回答by Muhammad Hassaan Bin Tanveer
if someone is using electron or any other JavaScript framework. This might work for you. Icon's in electron after setting up semantic properly were not showing. The error is not in semantic neither loading. Error is with Photon and semantic combination. I used photon with semantic to make my UI look great. Basic solution I opted is in reference to thisofficial error reporting. Also in my UI icon wasn't appearing for a drop-down so I used console to solve like
如果有人使用电子或任何其他 JavaScript 框架。这可能对你有用。正确设置语义后，电子中的图标未显示。错误不在语义和加载中。错误在于光子和语义组合。我使用带有语义的光子让我的 UI 看起来很棒。我选择的基本解决方案是参考这个官方错误报告。同样在我的 UI 图标中没有出现下拉菜单，所以我使用控制台来解决
.myclass .icon:before, .myclass.icon-before {
font-family: 'dropdown';
}
Hope it helps.
希望能帮助到你。
回答by Ed Henderson
My solution was pretty simple (once I worked it out). I had edited themes.configto use my new (yet to be built) theme. As you know it falls back to defaultso everything seemed to work OK.
我的解决方案非常简单（一旦我解决了）。我已经编辑themes.config使用我的新（尚未构建）主题。如您所知，它会回落，default因此一切似乎都正常。
/* Elements */
:
@flag : 'supernewtheme';
@header : 'supernewtheme';
@icon : 'supernewtheme';
@image : 'supernewtheme';
@input : 'supernewtheme';
:
Even though the console showed the Icons font loading (no 404), iti didn't work. I also checked the font was in my buildfolder in the correct place, it was.
即使控制台显示图标字体加载（没有 404），它也不起作用。我还检查了字体在我build文件夹中的正确位置，确实如此。
Changing the theme back to defaultfor @icondid the trick:
将主题改回defaultfor@icon成功了：
@icon : 'default';
