css字体图标的制作和使⽤。
css字体图标的制作和使⽤。
在项⽬开发的过程中，我们会经常⽤到⼀些图标。但是我们在使⽤这些图标时，往往会遇到失真的情况，⽽且图⽚数量很多的话，页⾯加载就越慢。所以，我们可以使⽤字体图标的⽅式来显⽰图标，既解决了失真的问题，也解决了图⽚占⽤资源的问题。
⼀：如何制作字体图标
1：上⽹下载需要的图标（svg格式），在这⾥推荐⼀个⽹站 ""，这⾥⾯⼏乎囊括了⽹站制作中所有需要的图标，⽽且是免费下载，（格式，⼤⼩，颜⾊都可以⾃定义）。
2：我们打开“”这个⽹站（当然阿⾥巴巴图标库这个⽹站也可以制作），到右上⾓这个红⾊的按钮，点击它。
3：到左上⾓这个按钮，点击import icons这个按钮，上传你的svg格式的图标。
4：当图标上传完后，图标的背景是灰⾊的，这个时候点击你需要的图标（选中后的背景会变⽩）。
5：点击页⾯右下⾓的这个按钮，跳转页⾯后，再点击
这个下载按钮，等待下载完成。
⼆：如何使⽤字体图标
1：解压下载后的⽂件夹，我们需要的是fonts⽂件夹和style.css, 将这个⽂件放⼊你的项⽬中,style.css⽂件中引⼊了字体⽂件，所以会有路径，这个时候你在使⽤的时候要注意路径问题，代码如下：（这⾥的多种字体⽂件是为了兼容浏览器）
@font-face {
font-family: 'icomoon';
src:  url('../?snsrp8');
src:  url('../?snsrp8#iefix') format('embedded-opentype'),
url('../f?snsrp8') format('truetype'),
url('../fonts/icomoon.woff?snsrp8') format('woff'),
url('../fonts/icomoon.svg?snsrp8#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
2：在页⾯中，我们只要给⼀个元素添加相应的类名就⾏，因为在style.css中已经将类名对应的图标写好了。
.icon-account:before {
content: "\e900";
}
.icon-caifu:before {
content: "\e901";
}
.icon-edit:before {
content: "\e902";
}
　页⾯中添加如下类似元素：
<span class="icon-account"></span>
　这样，我们的页⾯中就可以显⽰相应的图标了。
注意：在某些⼩⽶⼿机上可能有些图标不会显⽰：：
制作svg图片
⼆：使⽤阿⾥的iconfont：
1：到⽹站，搜索需要的图标
2：将图⽚加⼊购物车，点击页⾯右上⾓的购物车按钮，将所有图标添加到⾃定义项⽬中。3：在弹出的页⾯中，点击下载⾄本地。

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