今天介绍一下Font Awesome字体图标,并且介绍一些Font Awesome字体常用的一些使用方法,使用5版本:

下载地址fontawesome-free-5.11.2-web.zip 


如何引入FontAwesome字体

    1、下载压缩包,解压后,复制cssjswebfonts三个文件夹到项目下。


    2、在HMTL文件中,引入CSS(发布使用min(压缩版本),调试可以使用未压缩的) ,如: 

<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="./css/fontawesome.css" rel="stylesheet" type="text/css">
<link href="./css/brands.css" rel="stylesheet" type="text/css">
<link href="./css/solid.css" rel="stylesheet" type="text/css">
</head>

这样我们便可以在UI中,使用Foot Awesome图标了,如:

<body>
<i class="fas fa-bug"></i>
<i class="fas fa-biking"></i>
<i class="fas fa-bell"></i>
<i class="fab fa-facebook"></i>
</body>

效果:


https://fontawesome.com/cheatsheet 

        访问国外网站可能有些慢,可以访问:https://www.mchweb.net/atool/api/css/fontawesome/ 

        图标搜索https://fontawesome.com/icons?d=gallery&m=free 

<i class="fab fa-weixin"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-weibo"></i>


注:在FontAwesome5中分了三种类型的图标:

  1. solid (fas) , 字体是黑色,背景色可以改变。
  2. regular (far) 
  3. brands (fab) 

在FontAwesome4中,上面代码按如下方式编写:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="./css/font-awesome.css" rel="stylesheet" type="text/css">
</head>
<body>
<i class="fa fa-weixin"></i>
<i class="fa fa-whatsapp"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-weibo"></i>
</body>
</html>

效果,如图:使用:font-awesome-4.7.0.zip 

https://www.mchweb.net/atool/api/css/fontawesome/ 


点赞(1)

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部