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

正如标题所示，今天要掌握的知识利用@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前加上

