文字图标

文字图标

了解及作用

字体图标展示的是图标，本质是字体。

作用：处理简单的、颜色单一的图片

优点

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

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

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

• 使用方便：

  1. 下载字体包

  2. 使用字体图标

使用方法

下载字体包

登录（https://www.iconfont.cn/） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

使用字体图标

Unicode编码

1. 引入iconfont.css文档

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

    

2. 准备一个标签，将demo_index.html里图标对应的Unicode编码复制粘贴到标签

     <span>&#xe6b2;</span>
     <p class="iconfont">&#xe6b4;</p>

    

3. 给标签设置文字字体：font-family: 'iconfont';或.iconfont

    span {
                font-family: 'iconfont';
                font-size: 100px;
                color: aqua;
           }
    p.iconfont {
                /* font-size: 100px !important; */
                font-size: 100px;
                color: aqua;
           }

    

类名

1. 引入iconfont.css

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

    

2. 给图标调用对应的类名，必须调用2个类名 class="iconfont icon-XXX"

   • iconfont类：基本样式，包含字体的使用等

   • icon-xxx：图标对应的类名

     <span class="iconfont icon-user"></span>

    

   上传矢量图

   IconFont网站上传矢量图生成字体图标

   1. 与设计师沟通，得到SVG矢量图

   2. IconFont网站上传图标 → 上传SVG图标

   3. 浏览本地图标 → 去除颜色提交

   4. 加入购物车 → 下载使用

 

扩展：

jpg png gif 位图 由像素点组成 放大发虚

svg矢量图 由线条组成 放大不发虚（不模糊）