Question

我正在使用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">

但它仍然无法奏效。我错过了什么？

Answer 1

挖掘语义CSS文件会发现字体需要位于此处（相对于您的semantic.css）：themes/default/assets/fonts/

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

Answer 2

＆＃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>

＆＃13;

您可以尝试查看上面的代码段。您也可以使用以下链接来解决其他类似问题：

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

Answer 3

我的解决方案很简单（一旦我解决了）。我编辑了themes.config来使用我的新（尚未构建）主题。如你所知，它可以追溯到default所以一切似乎都正常。

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

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

为default将主题更改回@icon可以解决问题：

@icon       : 'default';

Answer 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 official page 下载语义ui zip文件夹并解压缩在组件文件夹中，您可以找到 icon.min.css

将该文件包含在 index.html

中

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

尝试显示那些图标Official docs

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

享受

Answer 5

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

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

希望有帮助。

语义UI图标 - 不加载字体

5 个答案: