Semantic UI中图标未显示

Question

我正在使用此指南，使用Gulp构建Semantic UI。

然而，现在的问题是图标未显示出来。所以，如果我使用<i class="facebook icon"></i>，什么都不会显示。

我猜可能没有构建图标字体之类的东西。

是否需要自己加载Font Awesome或类似的东西？我已经阅读了Semantic UI文档，但是找不到任何说明需要执行任何操作才能启用图标的地方。

- Jamgreen

---

你是否已经加载了semantic.css文件？ - Sahil Dhir

是的，我有，除了图标之外，Semantic UI 的其他所有功能都可以正常使用。 - Jamgreen

同时，请确保您没有使用字体族覆盖。这让我非常烦恼！ :-( 它试图在该字体族中呈现图标，这是不起作用的。 - Ruben Murray

Answer 1

您需要包含位于themes/default/assets/fonts/目录中的字体资产。 themes 文件夹必须与您的 semantic.css 文件在同一目录中。

这些字体从 themes 目录内的 semantic.css 文件外部导入。

要获取此目录，请下载 Semantic UI 的 zip 文件并查看其中的 dist 文件夹。

- therewillbecode

---

仍然无法理解你在第一步所指的意思，我查看了 assets/semantic-ui/components/icon.css 文件，并发现 src: url("./../themes/default/assets/fonts/icons.eot"); 已经正确地被包含了，但我仍然难以理解。 - Shift 'n Tab

Answer 2

我遇到了相同的问题，使用以下链接标签放在html头部即可：

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

我从他们的官方网站上找到了这个。

- Sanyam Gupta

---

有没有不使用CDN的解决方案？我需要在不使用CDN的情况下使用这个库。 - I Stand With Israel

Answer 3

从CDN加载压缩后的CSS时，我遇到了一个CORS问题（导致方形图标为空）。事实证明，是我的位置覆盖引起了这个问题，关闭它后图标正常显示。

- Andreas Bergström

---

我遇到了类似的问题。谢谢。 - Rohan Shenoy

Answer 4

由于这个问题在2019年时还没有被标记为已回答...下面是明确的答案。上面的答案也是正确的，只是不够直接。

基本上，你错过的是包含图标本身的部分。当你下载semantic-ui时，它会带有“dist”文件夹中的主题文件夹。你必须做的是复制该主题文件夹并将其粘贴到你的项目文件夹中的semantic-ui.css所在的位置，然后它就会起作用。

请记得将问题标记为已回答。

- Mosia Thabo

---

老兄，你真救了我一命。我花了四个小时才解决这个问题，多亏了你！如果你注册成为BAT创作者，我会给你打赏的。 - I Stand With Israel

Answer 5

在我的情况下，我忘了导入semantic ui的css文件。在App.js（作为顶级文件）或项目内的任何位置导入它。import 'semantic-ui-css/semantic.min.css'

- Gunjan

Answer 6

我更改了这一行代码来解决问题。

<link rel="stylesheet" type="text/css" href="/dist/semantic.min.css">

通过这个

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.css">

我还需要添加到icon.min.css的链接。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/components/icon.min.css">

我在medium上写了一篇有关此事的文章 :)

- Marta Słysz

Answer 7

我曾经遇到相同的问题，后来通过在我的webpack.mix.js文件中添加以下行解决了它。

  .copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff','public/css/themes/default/assets/fonts/icons.woff')
  .copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff2','public/css/themes/default/assets/fonts/icons.woff2')
  .copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.ttf','public/css/themes/default/assets/fonts/icons.ttf')

然后执行命令

npm run dev

这将在我的情况下添加我所需的缺失文件。

- Hector

Answer 8

在 semantic.css 文件中，您会找到以下行：

background: url("./themes/.....") 

因此，你需要将包含所有内容的themes文件夹复制到semantic.min.css旁边。

或者，只需将Semantic-UI-CSS-master文件夹及其所有内容复制到public/static/wwww文件夹中，即可使事情顺利运行。

- Hasan A Yousef

---

谢谢你分享“public/static/wwww”，你救了我的一天。 :) - Sercan Tırnavalı

Answer 9

所以，正如其他答案所提供的那样，您可以更改脚本的外观：

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

停止服务器并关闭浏览器。如果您没有完全关闭浏览器，错误将继续存在。重新启动您的服务器。

如果这不能解决您的问题，您也可以选择通过以下方式本地安装CSS库：

npm install semantic-ui-css

然后，在您的根index.js组件中导入该库：

import "semantic-ui-css/semantic.min.css";

- Daniel

Answer 10

我通过从这个链接下载icon.min.css并将CDN链接替换为以下两行来部分修复了这个问题：

    <link rel="stylesheet" href="~/Content/icon.min.css" />
    <link rel="stylesheet" href="~/Content/semantic.min.css"/>

仍然有一些图标缺失：所有的轮廓图标。 您也可以尝试从this branch中获取字体文件夹，但对我来说没有起作用。

- Emiliano Ruiz