字体图标

2022-03-16 316 阅读1分钟

字体图标（iconfont）

是什么？

展现出是图标，本质就是字体

有什么用？

灵活性高：可以像字体一样修改样式，color，font-属性
体积小
兼容性高：可以兼容所有的浏览器

怎么用？

1.在专门图标库网站下载

图标库网站：Iconfont：www.iconfont.cn/

2.下载字体包

3.使用字体图标

3.1.unicode用法

  <title>字体图标的学习</title>
  <!-- 第一步：先用外联式引入iconfont.css -->
  <link rel="stylesheet" href="../iconfont.css">
  <style>
    /* 第三步：设置span标签的字体家族为iconfont */
    span{
      font-family: iconfont;
      font-size: 50px;
      color: yellowgreen;
    }
  </style>
</head>
<body>
  <!-- 第二步：复制inconfont的代码 -->
  <span>&#xe8b7;</span>
</body>
</html>

3.2 font-class (类名)

<title>font-class的学习</title>
  <!-- 第一步：先用外联式引入iconfont.css -->
  <link rel="stylesheet" href="../iconfont.css">
  <style>
    /* 第三步：设置字体样式 */
   .s1 {
    color: aqua;
    font-size: 80px;
    }
  </style>
</head>
<body>
  <!-- 第二步，添加两个类名：iconfont和自己需要的font-class的代码，注意不要复制到. -->
  <span class="iconfont  icon-pengyouquan s1"></span>
</body>
</html>

拓展

如果图标库没有项目所需的图标应该怎么办？

首先和设计师沟通得到svg矢量图，然后在iconfont网站上传生成对应的字体图标下载使用

** 操作步骤如下**

打开iconfont网站，把svg图标直接上传上去

选择文件进行上传

去除颜色提交
加入购物车-->下载使用

使用在线的字体图标

1.生成在线代码地址

2.vscode中增加http:

【视频教程】 www.bilibili.com/video/BV1cf…

字体图标原理

**font-class实现原理：给对应的标签添加一个伪元素，这个伪元素设置content属性，属性值等于字体图标Unicode编码

**