语义 UI 图标 - 字体未加载答案

【问题标题】：Semantic UI Icons-font not loading语义 UI 图标 - 字体未加载
【发布时间】：2014-01-18 16:07:22
【问题描述】：

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

这是 HTML：

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

我已经链接了语义.css，但我认为我还需要做其他事情才能让图标正常工作？我也尝试过链接：

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

但它仍然不起作用。我错过了什么？

【问题讨论】：

标签： html css font-awesome semantic-ui

【解决方案1】：

在语义 CSS 文件中挖掘显示字体需要位于此处（相对于您的语义.css）：themes/default/assets/fonts/

来源： https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467

【讨论】：

不完全是。它与您的 semantic.min.css 平行。否则，您也可以通过外部样式表更改字体文件夹路径。
更新了链接和位置（他们改变了），谢谢
根据我的情况，我必须将theme文件夹放入css文件夹。检测路径的简单方法：用 Chrome 打开网站，检查元素 - 网络，找到未加载的字体 url。
如果这不是一个选项，我们真的要查找/替换那个字符串吗？
@DitmarWendt 是的，除非您想创建某种 URL 重定向，具体取决于您对 Web 服务器的控制程度。

【解决方案2】：

<!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>

你可以试试看一下上面的sn-p。您也可以使用以下链接解决其他类似问题：

https://cdnjs.com/libraries/semantic-ui

【讨论】：

将您的示例更新到2.2.13 版本会显示更多图标，例如身份证之一。

【解决方案3】：

您不需要使用任何其他库的字体真棒先试试cdn 官方icon.min.css

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>

有时这不起作用，所以你可以做的是去semantic-ui official page 下载语义 ui zip 文件夹并解压在组件文件夹中，您可以找到 icon.min.css

将该文件包含在 index.html 中

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

尝试显示那些图标Official docs

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

享受

【讨论】：

【解决方案4】：

我的解决方案非常简单（一旦我解决了）。我编辑了themes.config 以使用我的新（尚未构建）主题。如您所知，它会退回到default，所以一切似乎都正常。

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

即使控制台显示图标字体加载（没有 404），它也没有工作。我还检查了字体在我的build 文件夹中的正确位置，是的。

将@icon 的主题改回default 就成功了：

@icon       : 'default';

【讨论】：

【解决方案5】：

如果有人在使用电子或任何其他 JavaScript 框架。这可能对你有用。正确设置语义后的电子图标未显示。该错误不在语义上，也不在加载中。错误在于光子和语义组合。我使用带有语义的光子来使我的 UI 看起来很棒。我选择的基本解决方案是参考this官方错误报告。同样在我的 UI 图标中没有出现下拉菜单，所以我使用控制台来解决类似

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

希望对你有帮助。

【讨论】：