前端这个⾏业总有⼈想出奇奇怪怪的⽅法去实现⼀个操作
font(字体)法，不同的字体A长得都千奇百怪，所以有些设计师把字体改成图标，⽐如把"a"变成苹果，把"b"变成微博iconf ont-HT ML形式(使⽤htm l转义)
原理：
1. html转义(html实体)，搜索"html entity"可了解。
2. 转义符是有前缀的，"&#x"就是⼀个前缀。
3. "æ"中"e6"开头的不表⽰任何字符，也就是就算字体没加载，也只会显⽰空⽅格，不会乱码
使⽤⽅法：
1. 登陆iconfont
2. 选择图标>加⼊购物车>加⼊项⽬
3. 点击"Unicode"，查看在线链接(代码)，把它复制到html页⾯中的样式<style>中
4. 在需要⽤的地⽅把字体改成"font-family:'iconfont' "就能⽤了
iconf ont-C SS形式(使⽤伪类)
原理：
1. 和html转义类似，在CSS⾥写时，将"&#x"前缀改成"\"，同时把结尾的分号删掉
icon图标库2. 利⽤了伪类，直接在CSS⾥写
使⽤⽅法：
1. 登陆iconfont
2. 选择图标>加⼊购物车>加⼊项⽬
3. 点击"Font class"，查看在线链接(代码)
4. ⽤<link>标签引⽤到页⾯中(不⽀持file协议)
5. 每个使⽤图标的div都要加上"icon-font"，原因可查看你复制的代码了解
6. 每次添加或者重命名图标，都要更新⼀下代码
ps：改图标⼤⼩时，选择器要精确到".iconfont"，否则⽆法改，原因可查看你复制的代码了解
SVG法（推荐）
原理：
它是直接告诉浏览器如何画⼀个图案，⽽没有存储⽂件的
优点：
1. ⽀持CSS
2. 不会变形，宽⾼要⼀起写
3. 看不见锯齿，因为SVG是⽮量图
4. 可以使⽤彩⾊图标
5. ...

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。