网站推广.NET

网站推广.NET

css字体图标怎么用

来源:互联网

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在线生成

通过https://icomoon.io/app/#/select 这个网站来生成。当然还有其他一些类似的网站,但是这个真的很赞,很赞,很赞,说三遍。 

导入所有svg格式的图标,全选点击GenerateFont生成对应的字体图标。然后下载已打包好的所有文件。 

立即学习“前端免费学习笔记(深入)”;

页面引用相应的字体图标

下载的打包文件目录结构如上图所示,我们只需要引入fonts和style.css文件即可。fonts文件里如下所示,分别为:eot压缩字库,整合后的svg图标,ttf字体,woff字体格式。 


style.css里是对fonts文件的引入和相应图标的样式。

@font-face {    font-family: 'icomoon';    src:    url('fonts/icomoon.eot?n54c0o');    src:    url('fonts/icomoon.eot?n54c0o#iefix') format('embedded-opentype'),        url('fonts/icomoon.ttf?n54c0o') format('truetype'),        url('fonts/icomoon.woff?n54c0o') format('woff'),        url('fonts/icomoon.svg?n54c0o#icomoon') format('svg');    font-weight: normal;    font-style: normal;}[class^="icon-"], [class*=" icon-"] {    /* use !important to prevent issues with browser extensions that change fonts */    font-family: 'icomoon' !important;    speak: none;    font-style: normal;    font-weight: normal;    font-variant: normal;    text-transform: none;    line-height: 1;    /* Better Font Rendering =========== */    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}.icon-uniE900:before {    content: "\e900";}.icon-uniE901:before {    content: "\e901";}.icon-uniE902:before {    content: "\e902";}.icon-uniE903:before {    content: "\e903";}.icon-uniE904:before {    content: "\e904";}.icon-uniE905:before {    content: "\e905";}

我们可以对上面样式表进行修改,以达到自己页面显示的最佳效果。

<span class="icon-uniE901"></span>

需要什么图标,我们只需给一个行内标签(span,i,em)添加对应的class即可。

总结

使用字体图标确实非常方便,颜色、大小都可以通过对应的css来修改。而且文件比较小,有利于页面加载减少了http请求。 

但是如果一个字体图标文件已经生成,我们又有新的图标需要增加时,那么又需要重新生成相应的fonts文件和修改css文件。解决的办法是在生成之前尽可能的把所有用到的图标都加上,或者使用第三方字体图标库。

推荐学习:css视频教程

字体图标