💬个人网站：【芒果个人日志】
💬原文地址：Font-Awesome如何引入矢量字体图标 - 芒果个人日志 (wyz-math.cn)
💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。
💅文章概要：在开发网页的过程中，我们会经常需要用到一些小图标来进行形象地说明解释或者装饰网页，但是传统的图片引用方式引入的的是图像图标，不易修改，而矢量字体图标则能很好地解决这一问题，因为矢量字体图标的本质是字体，可以使用“<style>”标签对其属性进行修改，非常方便，已经被广泛应用于网页开发中！本文主要介绍font-awesome-4.7.0的引入和使用
🤟每日一言：将来的你一定会感谢现在奋斗的自己。
目录
-个人博客链接引用(以Typecho-handsome为例)
问题需求
在开发网页的过程中，我们会经常需要用到一些小图标来进行形象地说明解释或者装饰网页，但是传统的图片引用方式引入的的是图像图标，不易修改，而矢量字体图标则能很好地解决这一问题，因为矢量字体图标的本质是字体，可以使用“<style>”标签对其属性进行修改，非常方便，已经被广泛应用于网页开发中！本文主要介绍font-awesome-4.7.0的引入和使用
字体下载及目录上传
-font-awesome中文官网
点击进入font-awesome中文网，即可进入如下图所示界面，然后点击下载旧版v4.7按钮，下载字体压缩包然后解压为文件夹到桌面或者其他目录
-font-awesome目录上传
将font-awesome上传到网页服务器的目录中（ps：请上传整个目录！否则图标可能显示不出来）
链接引用
-普通网页链接引用
在网页<head>头部引入以下链接：
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">-个人博客链接引用(以Typecho-handsome为例)
在后台外观中找到开发者设置——自定义输出head头部html代码（其他blog也类似或者直接去源代码里找！），引入以下链接
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
字体图标引用
首先按如下图操作所示，来到font-awesome官网找到图标库
然后点击选择一个你想要使用的字体图标，进入界面
字体图标
进入改字体图标的界面后，如下图所示复制方框内的代码
复制框内代码
最后，在所要引入字体图标处粘贴刚刚复制过的代码
粘贴代码
最终效果如下图所示
<style>标签修改样式
使用<Style>标签可以修改字体图标的样式，还可以进行大小等修改，在本文中，只演示颜色修改效果，其他效果可参考<Style>标签的标准用法！
