FontAwesome 图标字体库的使用
在前端开发中,许多新手常会遇见一个问题,参考的网页上有类似下图的图标,但在资源里却找不到对应的文件,这是因为这些网页使用了图标库。这里介绍一种常见的图标库——fontawesome的使用。
1.登录font awesome官网,下载font awesome安装包,最好下载最新版本的,因为最新版本中的更新的子图图标相对于老版本数量比较全面
附:font awesome官网
http://fontawesome.dashgame.com/
2.下载好压缩包后,点击文件夹,找到css文件夹里面的font-awesome.css或者font-awesome.min.css(表示压缩过的)复制到自己项目里面的css文件夹中,并把安装包文件夹中的fonts文件夹整个文件夹复制到自己项目中。
3.打开html页面,在head头部中引入font-awesome.css。
<link rel="stylesheet" href="css/font-awesome.min.css">
当然了,如果没有下载安装包的,可以引入在线css。
比如:<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
4.图标的引用:font-awesome图标可以任何一个地方引用,只要在该元素的类中加入前缀fa,在加入对应的图标名称。不知道图标的名称,可以在官网中找到对应的图标,即可以找到对应的图标名称。
<i class="fa fa-car"></i>、<i class="fa fa-book"></i>
注:font awesome 设计为与内联元素一起使用。 <i>和 <span> 元素广泛用于图标。
5.可以直接对图标的属性进行更改,如图标的颜色、大小,并且可以组合不同的图标形成所需的图标等。
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
6.执行以上步骤,若是没有图标显示,可以打开font-awesome.css,检查字体库,即引入fonts文件的路径是否正确。
7.注意事项:引用图标时,一定要在class类中引入fa,然后在添加图标的名称
推荐阅读
-
FontAwesome 图标字体库的使用
-
清除托盘区不使用的图标记录清除方法
-
ie8下使用bootstrap不能显示icon的图标
-
.NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单
-
好搜地图标注怎么使用?好搜地图商户标注的详细方法
-
电脑蓝牙无法使用桌面右下角蓝牙图标不见的解决方法
-
苹果Mac10.9系统使用CleanMyMac后lunchpad图标丢失的原因及解决方法介绍
-
在用vue-cli4创建的vue2.x项目中通过vue-fontawesome使用fontawesome5
-
阿里图标素材在vuecli中的使用(.svg方式)
-
Spring Boot集成X-admin2.2时,使用layui的字体图标时无法正常显示或乱码的解决办法