Bootstrap4 中使用 Font Awesome 字体图标 教程

Bootstrap4中已经不提供免费的Glyphicons Halflings字体图标了,bootstrap4中默认也取消了 Font Awesome 字体图标的应用。所以,如果要使用相关图标就需要我们自己手动添加,具体步骤如下:

 

一、Font Awesome  图标字体 下载

Font Awesome图标字体 下载地址:https://fontawesome.com/download

基本上:图标字体下载免费版就可以了,选择“ free for web”。

Font Awesome图标字体 下载

 

二、将下载的文件解压到 bootstrp4 目录中

解压在其它地方也可以,主要是你能懂这个原理就可以了。

fontawesome-free-5.11.2-web

三、在html页面中添加引用,引用css文件夹中 all.css

<link rel="stylesheet" href="fontawesome-free-5.11.2-web/css/all.css">

 

四、在页面中使用Font Awesome图标

<i class="fas fa-camera"></i>

Font Awesome图标效果

 

以下图片是我用“Bootstrap4  + Font Awesome + Bootstrap Fileinput”使用后的效果:

Bootstrap4  + Font Awesome + Bootstrap Fileinput

 

另外:

1、还可以在 Font Awesome 官网(https://fontawesome.com/icons?d=gallery&m=free)搜索自己需要的免费字体图标,并查看用法。

Font Awesome免费字体图标搜索

 

2、如果你下载的包中不包含该图标,可将图标 svg文件下载下来,并拷贝至 svg 文件夹中再进行引用即可。将图标 svg文件下载

 

svg 文件夹

    A+
发布日期:2020年08月14日 19:50:25  所属分类:Bootstrap
最后更新时间:2020-08-14 19:50:25
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
  • ¥ 99.9元
  • 市场价:299元
SEO顾问 单站最低999元 整站全方位优化
SEO顾问 单站最低999元 整站全方位优化
  • ¥ 999元
  • 市场价:4999元
Microsoft 全家桶 “激活码/产品密钥”永久
Microsoft 全家桶 “激活码/产品密钥”永久
  • ¥ 29.99元
  • 市场价:888元
wp dz 帝国 dede phpcms等快速建站服务
wp dz 帝国 dede phpcms等快速建站服务
  • ¥ 999元
  • 市场价:4999元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: