13071077710
您的当前位置: 首页 > 前端开发 > html/css > 利用CSS3 @font-face属性在网页中添加小图标

利用CSS3 @font-face属性在网页中添加小图标

时间: 2017-2-28

正如标题所示,今天要掌握的知识利用@font-face + Icomoon 在网页中加入小图标。

知识要点:

在网站中加入小图标

打开http://icomoon.io/app/#/select选择你要下载的小图标,点击Generate Font 下载。

复制style.css样式到你的样式表里,注意修改路径

@font-face {
 font-family: 'icomoon';
 src: url('../fonts/icomoon.eot'); /* IE9 兼容模式 */
 src:url('../fonts/icomoon.eot?vml2lj');
 src:url('../fonts/icomoon.eot?#iefixvml2lj') format('embedded-opentype'),
 url('../fonts/icomoon.woff?vml2lj') format('woff'),
 url('../fonts/icomoon.ttf?vml2lj') format('truetype'),
 url('../fonts/icomoon.svg?vml2lj#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
 }
 .icon{
 font-family: "icomoon";
 font-style: normal;
 font-weight: normal;
 font-size: 20px;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 margin-right: 5px;
 color:#0195ba;
 }

复制fonts文件夹到你的主题里。

接下来我们就可以调用小图标在你网页中了。打开demo.html复制你想要在网页中显示的小图标代码,我的代码为e600,在网页中调用小图标,代码如下,注意在代码e600前加上&#x

<span class="icon">&#xe600;</span>

OK,你的小图标已经在网页中显出来了。赶紧去看看吧 https://zixie.me//demo/icomoon

Copyright © 2013-2019 子歇    版权所有   网站地图