fontawesome图标不显示的原因
一般有以下几种情况：
1、查看css路径是否正确；
2、查看font文件夹内的字体文件是否引入；
3、查看font文件夹内的字体资源路径是否正确。
4、访问网址和设置网址不一致；
5、css或font文件权限不够；
fontawesome图标不显示的解决方法
最简单的方式：BootstrapCDN （由MaxCDN提供）
一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西！
将以下代码粘贴到网页HTML代码的 <head> 部分.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
当新版本发布时，BootstrapCDN需要一点时间来同步到最新版本。稍安勿躁 :)
----------------------------------------------
现在很多 WordPress 或 ZBlogPHP 主题都集成有个性化图标，比如Blogs 主题就集成了 Font Awesome 图标，用户无需安装插件即可添加个性化图标，但是有些用户反馈说添加的图标有些显示有些却不显示。
其实这是因为 Font Awesome 版本问题。比如目前 Blogs 主题集成的是 Font Awesome 5.0.13 版本，现在 Font Awesome 在 2019 年 6 月 4 日已经升级到 5.9.0 了。每一个版本几乎都会有一些新图标出来，所以如果你使用了高版本的图标，那么就无法显示了。
那么我们怎么知道那个图标是对应那个版本的呢?这个很简单，打开Font Awesome 官网(https://fontawesome.com/)，建议选择免费图标，然后点击我们想要的图标(如点击地址簿图标 address-book)。具体如下图所示：
在出现的“address-book”页面右上角就能看到该图标更新于the Font Awesome 6 Beta!版本，https://fontawesome.com/v6.0/icons
具体如下图：
我们先要确定网站主题所集成的 Font Awesome 是哪个版本，那么就可以直接使用这个版本的address-book 图标。
确定这个图标能够使用后，点击【Start Using This Icon】按钮，然后点击下图红色箭头所示的复制图标按钮即可复制该图标 HTML 代码，然后粘贴到文件想要显示的位置即可。
现在知道添加 Font Awesome 某些图标不显示的原因之后，再遇到这种情况，可以考虑换其他适合使用的图标，或者更新主题所集成的 Font Awesome 版本。
---------------------------------------------------
具体是哪种需要细心排查，下面分享个具体案例；
在做项目时，需要在html文件中引入font-awesome.min.css，但是引入后：
以前在用font-awesome库里的图标时，都是直接从node中下包，然后在main.js中引入得即可，第一次直接在html中直接引入css文件，哈哈哈，虽然小颖已经在html中引入了 font-awesome.min.css ，但是图标并没有出来，怎么解决呢?
其实只需要把font-awesome中的fonts文件夹放在与font-awesome.csss所在的css文件夹同级的位置问题就解决啦，嘻嘻。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>通行费计算</title> <link rel="stylesheet" href="./css/amazeui.min.css"> <link rel="stylesheet" href="./css/font-awesome.min.css"> </head>
目录位置：
仿站网 » fontawesome图标不显示的原因及解决方法
