字体图标的使用

1.初识字体图标

图标字体(iconfont):在网页中我们经常会用到一些小图标,我们可以通过图片来引入,但是图片比较大而且不灵活,我们可以使用iconfont,将图标当做字体来使用比较方便

1.fontsome

1.对于中文版本

地址: http://www.fontawesome.com.cn/

使用:

1. 下载安装解压的项目目录

2. 引入css文件

   <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
   

3. 使用

   <i class="fa fa-qq"></i>
   
   <!-- <i class="fa 图标代号"></i> -->
   

2.对于官方版本

地址: https://fontawesome.com/

使用:

1. 下载安装解压的项目目录

2. 引入css文件

   <link rel="stylesheet" href="fontawsome/css/all.css">
   

3.使用

• i标签

  <i class="fas fa-bell" style="font-size:80px; color:red;"></i>
  
  <!-- <i class="fas/fab 图标代号"></i> -->
  

• 使用伪元素

   li::before{
              /* 
                  通过伪元素来设置图标字体
                      1.找到要设置图标的元素通过before或after选中
                      2.在content中设置字体的编码
                      3.设置字体的样式
                          fab
                          font-family: 'Font Awesome 5 Brands';
  
                          fas
                          font-family: 'Font Awesome 5 Free';
                          font-weight: 900; 
  
              */
              content: '\f1b0';   
             	/* content:'\图标编码' */
              font-family: 'Font Awesome 5 Free';
        		/* font-family: 'Font Awesome 5 Brands'/Font Awesome 5 Free'; */
              font-weight: 900; 
              color: blue;
              margin-right: 10px;
  }
  

• 实体

  <span class="fas">&#xf0f3;</span>
  
  #class为fas/fab   内容为&#x字体编码
  

2.iconfont

官方教程:https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.17&helptype=code

1. 去图标库挑选图标并加入到购物车

2. 将添加到购物车的图标添加到项目

3. 下载到本地(以font-class为例)

4. 解压到项目目录,引入文件夹下的iconfont.css文件

   <link rel="stylesheet" href="font_1978411_h9v0gxtiux/iconfont.css">
   

5. 使用

   <i class="iconfont icon-xxx"></i>  #选择合适的图标
   

   图标代码可以再项目中看: