博客列表 >前端学习之字体图标的使用

前端学习之字体图标的使用

༒唯一࿈༒
༒唯一࿈༒原创
2023年03月23日 19:59:01311浏览

字体图标的使用

准备工作:

1.寻找一个字体图标网站:阿里巴巴矢量图标库
2.注册并拿图标做个练习demo;
3.选择并添加一个图标到购物车
添加图标
4.创建一个新项目
创建一个项目
5.选择font class 方式使用文字图标,点击创建在线链接地址
选择使用文字图标方式
6.准备工作就绪,开始尝试使用
7.准备一个空页面fontclass.html
8.引入css 文件
9.将图片元素增加一个“iconfont” 的类名
10.复制需要展示的图标代码(添加为该标签的class 属性)

HTML页面

html页

展示效果

展示效果

注意: 添加一个新图标,需要重新生成链接引入使用
疑问:对于彩色图标应该如何上色呢

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议