css 字体图标

一、字体图标 ：

概念：字体图标展示的是图标，本质是字体。可以使用css字体属性进行修饰。

例如下图中的购物车图标：

二.优点

灵活性：灵活地修改样式，例如：尺寸、颜色等

轻量级：体积小、渲染快、降低服务器请求次数

 兼容性：几乎兼容所有主流浏览器

使用方便： 1. 下载字体包 2. 使用字体图标

三.字体图标的下载

1.进入https://www.iconfont.cn/网站，选择官方素材库下载

 2.添加至购物车

 3.选择添加至项目

 4.选择下载至本地

 四.用法

1.引入字体图标样式表

使用link标签引入iconfont.css样式表，注意是iconfont.css

2.调用图标对应的类名，必须调用2个类名

 .iconfont类定义了该图标的color、 font-family、font-size、 font-style等字体属性

icon-xxx通过定义伪元素将图标添加

 调用：

选择复制 

 

粘贴至

 五、购物车实例

    
    
    
    
    
    


    

    

        

            
            
                
            
            
             购物车