欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

字体图标的使用

程序员文章站 2024-02-16 10:38:10
...

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. 去图标库挑选图标并加入到购物车

字体图标的使用

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

字体图标的使用

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

字体图标的使用

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

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

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

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

字体图标的使用

相关标签: html + css