一.字体图标是什么

  • 字体图标展示的是图标，本质是字体。 是处理简单的、颜色单一的小图标
  • 如图中框住的就是字体图标

 二.字体图标的优点

  • 灵活性：灵活地修改样式，例如：尺寸、颜色等
  • 轻量级：体积小、渲染快、降低服务器请求次数
  • 兼容性：几乎兼容所有主流浏览器
  • 使用方便

三.图标库

Iconfont：https://www.iconfont.cn/ 阿里巴巴字体库 (常用) 

 

四.使用方法

1.下载字体包

2.解压字体包并复制相关文件到本地目录下

 

3.标签使用字体图标

五.具体使用方法

一般情况:因为阿里字体库比较稳定，很多情况下，我们无需下载相关文件到本地，直接引入在线地址即可。

 

方法一:使用字体图标-类名:

  • 引入字体图标样式表
  •     <!-- 引入字体图标的css -->
    <link rel="stylesheet" href="./fonts/iconfont.css">
    调用图标对应的 类名，必须调用2个类名  
  • iconfont类：基本样式，包含字体的使用等
  • icon-xxx：图标对应的类名 
  •     <!-- iconfont是必须带的类名 -->
    <!-- 使用一个标签加上字体图标类名 -->
    <span class="iconfont icon-xxx"></span>

    方法二:使用字体图标 – unicode编码：

    • HTML 
    • <span>&#xe8ab;<span>

            ·  然后调用类名 class=“iconfont”

方法三 :使用字体图标 – 伪元素：

  • 通过查看iconfont.css文件 
  • .icon-gouwucheman:before {
  content: "\e600";
}

    六.购物车案例

    1.代码块

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <style>
i{
    color: red;
}
.box{
    width: 120px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: pink;
}
    </style>
</head>
<body>
    <div class="box">
        <i class="iconfont icon-gouwucheman"></i>
        <span>购物车</span>
        <em class="iconfont icon-arrow-down"></em>
    </div>
</body>
</html>

    2.效果图

 

 

# 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

MySQL全文索引源码剖析之Insert语句执行过程

avatar 华为云开发者联盟
cover

openGauss - 向量化执行引擎 - distinct分组聚合的实现

avatar 华为云开发者联盟
cover

【酷哥说库|GaussDB微动画】GaussDB数据库透明数据加密

avatar 华为云开发者联盟