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
付杰
  • ¥ 298.0元
  • 市场价:899.0元
  • ¥ 119.0元
  • 市场价:199.0元
  • ¥ 198.0元
  • 市场价:398.0元
  • ¥ 89.0元
  • 市场价:129.0元

发表评论

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