• 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了,完美不,快大声喊完美

  • 相关阅读:
    [Everyday Mathematics]20150226
    [Everyday Mathematics]20150225
    [Everyday Mathematics]20150224
    [Everyday Mathematics]20150223
    [Everyday Mathematics]20150222
    [Everyday Mathematics]20150221
    [Everyday Mathematics]20150220
    [Everyday Mathematics]20150219
    [Everyday Mathematics]20150218
    [Everyday Mathematic]20150217
  • 原文地址:https://www.cnblogs.com/shoestrong/p/5394229.html
Copyright © 2020-2023  润新知