logo标签列表

Semantic UI 图标字体无法加载

htmlcssfont-awesomesemantic-ui
17
我正在使用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">

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

5个回答
23
2
不完全是。它与您的semantic.min.css并列。否则，您也可以通过外部样式表更改字体文件夹路径。 - iMatoria
更新了链接和位置（它们已经改变），谢谢。 - fgblomqvist
1
根据我的情况，我需要将theme文件夹放入css文件夹中。一种简单的方法是检测路径：用Chrome打开网站，检查元素 - 网络，找到未加载的字体URL。 - Hunger
1
如果这不是一个选项，我们真的打算找到/替换那个字符串吗？ - Ditmar Wendt
@DitmarWendt 是的，除非你想根据你对Web服务器的控制程度创建某种URL重定向。 - fgblomqvist
13

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

你可以尝试查看上面的代码片段。您还可以使用以下链接查找其他类似问题：

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

将您的示例更新到2.2.13版本后，会显示更多的图标，例如身份证。 - Stephane
4

您无需使用任何其他库，可以首先尝试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官方页面 下载语义化UI zip文件夹并提取 在组件文件夹中，您可以找到icon.min.css

将该文件包含在index.html中

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

尝试展示这些图标 官方文档。
<i class="disabled users icon"></i>

享受

0
我的解决方案非常简单（一旦我弄清楚了）。我编辑了themes.config以使用我的新主题（尚未构建）。正如您所知，它会回退到default，因此一切似乎都可以正常工作。
/* Elements */
:
@flag       : 'supernewtheme';
@header     : 'supernewtheme';
@icon       : 'supernewtheme';
@image      : 'supernewtheme';
@input      : 'supernewtheme';
:

尽管控制台显示图标字体已加载（没有404错误），但它仍然无法正常工作。我还检查了字体是否在正确的位置上，即我的build文件夹中，是的。

将主题更改回default以适用于@icon就解决了问题：

@icon       : 'default';
0
如果有人正在使用Electron或任何其他JavaScript框架，这可能适用于您。在正确设置语义后，Electron中的图标未显示。错误不在语义加载上，而是在Photon和语义组合上。我使用Photon与语义一起使我的UI看起来很棒。我选择的基本解决方案是参考this官方错误报告。此外，在我的UI中，下拉菜单中的图标未出现，因此我使用控制台进行了解决。
.myclass .icon:before, .myclass.icon-before {
    font-family: 'dropdown';
}

希望对你有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接