给html加入字体图标


概述

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

下载

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

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

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

  1. 加入库

  2. 下载下来

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

使用

打开font_iyjbf80dvwi文件

symbol引用

阿里平台推荐引用。

第一步:引入iconfont.js文件

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

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

具体操作看下图:

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM