我正在使用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">
但它仍然无效。我错过了什么?
挖掘语义CSS文件会发现字体需要位于此处(相对于您的semantic.css):themes/default/assets/fonts/
资料来源:https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467
<!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>
您可以尝试查看上面的代码段。您也可以使用以下链接来解决其他类似问题:
我的解决方案很简单(一旦我解决了)。我编辑了themes.config
以使用我的新(尚未建成)主题。如你所知,它回归default
so似乎一切正常。
/* Elements */
:
@flag : 'supernewtheme';
@header : 'supernewtheme';
@icon : 'supernewtheme';
@image : 'supernewtheme';
@input : 'supernewtheme';
:
即使控制台显示图标字体加载(没有404),iti也无法正常工作。我也检查了字体在我的build
文件夹中的正确位置,它是。
将主题改回default
为@icon
做了诀窍:
@icon : 'default';
你不需要使用任何其他库的字体 - 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
请享用