inconfont 字体库应用

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">3</i>

第一步那些代码全部复制粘贴到你的css文件，嗯嗯，上面说到 要的那四个文件 你找一个地方存着，看后缀eot和woff和ttf和svg后缀的，对于上面的吧路径弄对，弄就是搞的意思。

然后把第二部全部也复制在css里面，那个 .inconfont 那个class名字，你给你的i标签class用什么名字第二部就用什么名字。

当然在第二部那个inconfont里面也可以加color颜色啊，font-size改变大小啊 都可以的哈。

第三部i标签里面放的那个代码就是第四张图 下面的那个代码，那个代码就能出来图标 恩 OK了，完美不，快大声喊完美