我正在使用Gulp使用https://semantic-ui.com/introduction/getting-started.html上的指南构建语义UI。
然而，问题是现在图标没有显示。因此，如果我使用<i class="facebook icon"></i>，则不会显示任何内容。
我想我还没有构建图标字体或类似字体。
是否有必要自己加载Font Awesome或类似的东西？我已经阅读了Semantic UI文档，但我找不到任何说明我必须做任何事情才能启用图标。
答案 0 :(得分：4)
从CDN加载缩小的CSS时，我遇到了带有语义UI图标的CORS问题（导致方形的空白图标）。原来是由我的位置覆盖引起的，将其关闭会使图标正确显示。
答案 1 :(得分：3)
我遇到了同样的问题，请在您的html标题中使用此链接标记，然后您就可以开始了：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
从他们的官方website那里得到了这个。
答案 2 :(得分：2)
就我而言，我忘记导入语义 ui css 文件。将其导入 App.js（因为它是顶级文件）或项目内的任何位置。
import 'semantic-ui-css/semantic.min.css'
答案 3 :(得分：1)
您需要包含以包含位于themes / default / assets / fonts /
中的字体资源themes 文件夹必须与semantic.css文件位于同一目录中。
字体是从 themes 目录中的semantic.css文件外部导入的。
要获取此目录，download用于语义ui的zip并查看 dist 文件夹。
答案 4 :(得分：1)
我解决了替换此行的问题
<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">
我在媒介上写了一个post：）
答案 5 :(得分：0)
由于它尚未在2019年被标记为疯了，所以这是明确的答案。以上答案也是正确的，只是不简单。
所以基本上您错过的是图标本身的包含。当您下载语义UI时，它在“ dist”文件夹中带有themes文件夹。您需要做的就是复制该主题文件夹，并将其粘贴到semantic-ui.css所在的项目文件夹中。它将起作用。
请记住，将问题标记为已回答。
答案 6 :(得分：0)
我遇到了同样的问题，我在webpack.mix.js上添加了以下几行来解决它
override fun onDestroy() {
super.onDestroy()
compositeDisposable.clear()
compositeDisposable.dispose()
}
然后执行命令
npm run dev
在我的情况下，这会添加我需要的丢失文件
答案 7 :(得分：0)
我通过从this link下载icon.min.css，然后用以下两行替换CDN链接来部分解决此问题：
<link rel="stylesheet" href="~/Content/icon.min.css" />
<link rel="stylesheet" href="~/Content/semantic.min.css"/>
仍然缺少一些图标：所有概述的图标。 您也可以尝试使用this branch中的fonts文件夹，但是它对我不起作用。
答案 8 :(得分：0)
在semantic.css文件中，您会找到以下行：
background: url("./themes/.....")
因此，您要做的是将themes文件夹及其所有内容复制到semantic.min.css
只需将文件夹Semantic-UI-CSS-master及其所有内容复制到您的public/static/wwww文件夹中，即可使工作顺利进行。
答案 9 :(得分：0)
因此，正如其他答案所提供的那样，您可以将脚本更改为：
<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";
答案 10 :(得分：-1)
我在使用React时遇到了同样的问题
尝试了所有提及的内容，但没有任何效果
然后只是替换了此链接
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
希望有帮助