语义UI图标 - 不加载字体

问题描述 投票:17回答:4

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

但它仍然无效。我错过了什么?

html css font-awesome semantic-ui
4个回答
23
投票

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

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


9
投票

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


0
投票

我的解决方案很简单(一旦我解决了)。我编辑了themes.config以使用我的新(尚未建成)主题。如你所知,它回归defaultso似乎一切正常。

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

即使控制台显示图标字体加载(没有404),iti也无法正常工作。我也检查了字体在我的build文件夹中的正确位置,它是。

将主题改回default@icon做了诀窍:

@icon       : 'default';

0
投票

你不需要使用任何其他库的字体 - awesome尝试cdn first官方icon.min.css

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

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

在index.html中包含该文件

semantic-ui official page

尝试显示那些图标 <link rel="stylesheet" href="icon.min.css">

Official docs

请享用

© www.soinside.com 2019 - 2024. All rights reserved.