详解CSS中iconfont的使用

什么是iconfont

iconfont是一种将矢量图标转换成字体图标的技术，使用它可以方便的实现图标的展示并且可以像文字一样进行样式的处理。同时，iconfont的字体文件非常小，可以很大程度上提升网页性能。

如何使用iconfont

Step 1: 获取图标库

首先，需要前往iconfont官网（http://www.iconfont.cn/）注册账号或登录，然后在图标库中选择需要使用的图标进行下载。

Step 2: 导入字体文件

将下载下来的iconfont文件解压缩后，可以看到其中包含有.ttf和.eot等多种格式的字体文件，可以根据需要选择其中所需的文件进行导入。

<!-- 导入ttf格式的iconfont字体 -->
<style type="text/css">
@font-face {
font-family: iconfont; /* 可以自定义iconfont字体名称 */
src: url('iconfont.ttf') format('truetype');
}
.iconfont {
font-family: iconfont!important; /* 通过!important覆盖默认字体，使其应用iconfont字体 */
}
</style>

Step 3: 使用iconfont

使用iconfont的方式非常简单，只需要在需要显示该图标的元素中加入相应的class和标签即可。例如，要在一个按钮中显示一个叫作“”的图标，可以按照以下方式定义该按钮。

<button class="iconfont">&#xe61e;</button>

其中，class属性指定了该按钮要应用iconfont字体，而">"则是该按钮要显示的图标的代码。

示例说明

示例1：应用自定义名称的iconfont

<style type="text/css">
@font-face {
font-family: myiconfont; /* 自定义iconfont名称 */
src: url('iconfont.tff') format('truetype');
}
.icon1 {
font-family: myiconfont!important;
}
</style>

<!-- 显示iconfont图标 -->
<h2 class="icon1">Star</h2>

以上示例中，首先定义了名为myiconfont的iconfont，然后将其应用到class为icon1的元素中以显示一个名为Star的图标。

示例2：在按钮中应用iconfont

<style type="text/css">
@font-face {
font-family: myiconfont;
src: url('iconfont.ttf') format('truetype');
}
.icon2 {
font-family: myiconfont!important;
}
button {
padding:10px 20px;
background-color:#007fff;
color:#fff;
font-size:16px;
border:none;
border-radius:5px;
cursor:pointer;
}
</style>

<!-- 在按钮中显示图标 -->
<button class="icon2">&#xe601;  Click Me</button>

以上示例中，首先定义了名为myiconfont的iconfont，然后将其应用到class为icon2的元素中以显示一个名为Click Me的按钮，并在其中添加了一个以“”为代码的图标。