iconfont图标

在以前，图标是由png格式的图片体现出来的，因此要使其变色等操作，需要用js改变相应的图标地址才能实现。维护方便，改变图标的大小，颜色，使需要设计师再进行进行设计，也是一件计较麻烦的事儿。

Iconfont，在我理解起来，就是把图标“文字”话。通过字体把图标输出到页面。因此，图标就像字体一样可以随意的根据css调整其颜色，大小，行高，行距。因为是矢量输出，所以也不会有失真的问题。因此维护相对来讲，已经便捷了很多。现在很多网站都采用了这种方式来实现图标和特殊字体的展示，如。淘宝，京东，bootstrap应用到框架的图标展示中。

在这里推荐一个阿里iconfont在线制作工具，http://www.iconfont.cn/。里面有大量的图标库，可根据自己项目进行搜索添加，以及下载。也可以根据自己特定的项目在线制作自己的图标。其具体操作在网站内有教程，所以就不在这里讲解展示。

核心代码：

第一步：使用font-face声明字体

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

第二步：定义使用iconfont的样式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33;</i>

猜你喜欢