如何使用Font Awesome

小鱼儿 2023-10-07 12:18 12阅读 0赞

**简述**：Font Awesome 可以提供众多样式的图标，使用简便。  
**问题**：如何使用Font Awesome  
**解决**：  
1.官网下载Font Awesome旧版或最新版；http://www.fontawesome.com.cn/faicons/  
2.打开压缩包，内容如下；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70]  
3.将CSS（根据自己的选择）内的font-awesome（或min）文件放到自己的css文件夹中；  
![在这里插入图片描述][20200407141524397.PNG]  
4.将Fonts文件夹取出，同放到与CSS文件夹同级目录即可（方便）；  
5.开始使用：根据自己需要，在Font Awesome官网界面内搜寻相应图标代码，复制到相应位置即可展示（页面内的具体位置和大小可自行更改）；  
注：在HTML内的head区域，要正确引用font-awesome文件的路径。  
![在这里插入图片描述][20200407141545199.PNG]  
\*\*注意：\*\*当界面仅显示小方块时，要排查路径是否有问题，包括html与font-awesome.css相对路径问题，以及font-awesome.css与fonts文件夹内的六个文件的相对路径。如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200407141507967.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1,size_16,color_FFFFFF,t_70
[20200407141524397.PNG]: https://img-blog.csdnimg.cn/20200407141524397.PNG
[20200407141545199.PNG]: https://img-blog.csdnimg.cn/20200407141545199.PNG
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020072210201312.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsYnl1,size_16,color_FFFFFF,t_70