给html加入字体图标

时间:2024-02-18 11:15:15

概述

iconfont字体图标就是用字体来代替图标、图片文件的做法,并且通过字体图标可以对图标的大小、颜色等进行控制。
相对于图片图标,它减少请求次数,缓解服务器压力。
html中想要用字体图标的话,需要去下载图标来使用。这里我们以国内的阿里巴巴矢量图库为例。

下载

  1. 进入官网,注册登录,然后进入首页,可以直接在首页搜索你需要的图标。如下图:

或者直接图标库->官方图标库 如图:

  1. 找到,点击进去,如图:

  1. 加入库

  2. 下载下来

  1. 解压,再把解压的font_iyjbf80dvwi文件复制在项目根目录下,如图:

使用

打开font_iyjbf80dvwi文件

symbol引用

阿里平台推荐引用。

第一步:引入iconfont.js文件

第二步:加入通用的CSS代码

第三步:选择合适的图标名应用于页面。

具体操作看下图:

运行,可以看到图标出来啦