inconfont 字体库应用

先去注册个号码，好像只能够用新浪微博登陆哈，搞一个微博去。

第一就是点上面图标库，选择官方和全部都行。

恩接着点一个图标，他就本身跑到 第二个按钮哪里去了，在点第二个按钮，会出来一个建立项目，随便建立一个就好。

上图不说话

下载本地这个 你们都会把我就不解释了哈，别问我 怎么不和照片同样，我以前就给那个项目里面加了好几个图标，你的只有一个图标是正确的。

恩而后就获得了这么多文件，然而咱们只要我红色框里面圈到的文件就好

 

 

如今咱们把 咱们要获得的东西都获得了，而后就是 你本身写html了：

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

@font-face {
　　font-family: 'iconfont';
　　src: url('iconfont.eot'); /* IE9*/
　　src: url('iconfont.eot') 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') 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>

第一步那些代码所有复制粘贴到你的css文件，嗯嗯，上面说到 要的那四个文件 你找一个地方存着，看后缀eot和woff和ttf和svg后缀的，对于上面的吧路径弄对，弄就是搞的意思。而后把第二部所有也复制在css里面，那个 .inconfont 那个class名字，你给你的i标签class用什么名字第二部就用什么名字。固然在第二部那个inconfont里面也能够加color颜色啊，font-size改变大小啊 均可以的哈。第三部i标签里面放的那个代码就是第四张图 下面的那个代码，那个代码就能出来图标 恩 OK了，完美不，快大声喊完美