文字图标
文字图标
字体图标展示的是图标,本质是字体。
作用:处理简单的、颜色单一的图片
优点
-
灵活性:灵活地修改样式,例如:尺寸、颜色等
-
轻量级:体积小、渲染快、降低服务器请求次数
-
兼容性:几乎兼容所有主流浏览器
-
使用方便:
-
下载字体包
-
使用字体图标
-
使用方法
下载字体包
登录(https://www.iconfont.cn/) → 选择图标库 → 选择图标,加入购物车 → 购物车 → 添加至项目 → 下载至本地
使用字体图标
Unicode编码
-
引入iconfont.css文档
<link rel="stylesheet" href="./fonts/iconfont.css">
-
准备一个标签,将demo_index.html里图标对应的Unicode编码复制粘贴到标签
<span></span>
<p class="iconfont"></p> -
给标签设置文字字体:font-family: 'iconfont';或.iconfont
span {
font-family: 'iconfont';
font-size: 100px;
color: aqua;
}
p.iconfont {
/* font-size: 100px !important; */
font-size: 100px;
color: aqua;
}
类名
-
引入iconfont.css
<link rel="stylesheet" href="./fonts/iconfont.css">
-
给图标调用对应的类名,必须调用2个类名 class="iconfont icon-XXX"
-
iconfont类:基本样式,包含字体的使用等
-
icon-xxx:图标对应的类名
<span class="iconfont icon-user"></span>
上传矢量图
IconFont网站上传矢量图生成字体图标
-
与设计师沟通,得到SVG矢量图
-
IconFont网站上传图标 → 上传SVG图标
-
浏览本地图标 → 去除颜色提交
-
加入购物车 → 下载使用
-
扩展:
jpg png gif 位图 由像素点组成 放大发虚
svg矢量图 由线条组成 放大不发虚(不模糊)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性