字体图标的使用（超详细的教程）

字体图标的使用（超详细的教程）

先上效果图。

1、以IcoMoon图标库为例，进入IcoMoon官网。

2、选择喜欢的图标并下载。
（1）点击右上角进入

（2）在Selection中可选择图标

（3）更多主体点击左上角的Icon Library

添加即可，添加会自动返回

（4）下载图标，右下角Download即可

3、引入图标
（1）解压后将font复制一份到根目录
（我因为把css写在外部所以复制到了css文件里，这里根据路径需要放置即可）

（2）在css中引入样式

代码如下：

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?w9o154');
    src: url('fonts/icomoon.eot?w9o154#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?w9o154') format('truetype'), url('fonts/icomoon.woff?w9o154') format('woff'), url('fonts/icomoon.svg?w9o154#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

（此代码也可在下载的style.css中复制）如图

（3）在HTML中引入所需图标
案例从demo.html中查看

（4）选中图标复制即可

（5）在HTML中引用
记得先设置字体样式为’icomoon’，然后复制到所需要的地方即可

body {
	background: url(../img/oceanside.jpg) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	background-color: #CCCCCC;
}

<div class="content-info">用户名：
								<input type=" text" id="username5" placeholder="&nbsp;">
							</div>

（常规用法）

    <span style="font-family: 'icomoon';"></span>

4、效果如图