如何网页里使用字体图标及创建自己的图标库

字体图标

在这里插入图片描述

字体图标:展示的是图标,本质是字体

作用:在网页中添加简单的、颜色单一的小图标

优点

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

iconfont 图标库:https://www.iconfont.cn/

登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标,加入购物车 → 购物车,添加至项目,确定 → 下载至本地

在这里插入图片描述

使用字体
  1. 引入字体样式表(iconfont.css)

在这里插入图片描述

  1. 标签使用字体图标类名
    • iconfont:字体图标基本样式(字体名,字体大小等等)
    • icon-xxx:图标对应的类名

在这里插入图片描述

上传矢量图

作用:项目特有的图标上传到 iconfont 图标库,生成字体

在这里插入图片描述

上传步骤:上传 → 上传图标 → 选择 svg 矢量图,打开 → 提交 → 系统审核

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凌叁儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值