离线模式下Font Awesome无法工作

Question

我正在使用 font-awesome 图标来发布我的HTML,CSS模板。当我有现场链接时它们可以正常运行，但是当我下载CSS文件并将其包含在我的页面中时，图标却消失了。

线上路径：<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> 本地路径：<link href="css/font-awesome.css" rel="stylesheet"> 如何在离线模式下使用font awesome？

- Mehar

---

只需下载该CSS文件，并在头部包含即可 :) http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.3.0.zip然后检查CSS文件的路径.. :) - Matej Đaković

打开http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css，查看如何连接字体。你能找到字体在哪里吗？ - Dmitriy

@Dmitriy 谢谢，我已经包含了字体文件夹，现在它可以正常工作 :) - Mehar

Answer 1

你是否已将FontAwesome字体嵌入到你的项目中？ 你的结构必须如下所示：

[+]assets
    [+]css
        font-awesome.css
    [+]js
        demo-file.js
    [+]fonts
        fontawesome-webfont.eot
        fontawesome-webfont.svg
        fontawesome-webfont.ttf
        fontawesome-webfont.woff
        fontawesome-webfont.woff2
index.html
sample.html
whatever.html

之后，您可以在本地使用FontAwesome。

- Mohammad Javad Akbari Eidgahi

---

谢谢！我忘记定义这个了！ - miltonbhowmick

Answer 2

您还需要下载字体本身...它就像任何其他字体一样...因此，请访问FontAwesome网站，按照说明下载CSS和字体 :)

- nikola_wd

Answer 3

可能是路径名问题，请尝试以下操作：

<link href="./css/font-awesome.css" rel="stylesheet">

- ScaisEdge

Answer 4

我认为您可能没有下载字体或使用了错误的路径。您可以在https://fontawesome.com/download下载最新版本的FontAwesome字体。不要忘记检查您的路径！希望这能帮助到您。

- Viet Tran

Answer 5

在我的情况下：如果您在 HTML 中添加了这样的内容（或者使用 * 选择器添加了任何其他字体系列），那么这可能是导致图标未显示的原因。

*{
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
 }

- Faisal Mushtaq