美文网首页
iconfont的使用

iconfont的使用

作者: Doit的谎言 | 来源:发表于2017-02-24 10:50 被阅读0次

    1、登录iconfont,(阿里图标库),点开图标,选择需要的图标,添加到库里(点击购物车标志);

    2、点击添加至项目,复制代码,(若图标有更新,则需更新代码)

    3、复制的代码如下:

      @font-face {

        font-family: 'iconfont';  /* project id 238765 */

        src: url('//at.alicdn.com/t/font_vujarmye95zpk3xr.eot');

        src: url('//at.alicdn.com/t/font_vujarmye95zpk3xr.eot?#iefix') format('embedded-opentype'),

        url('//at.alicdn.com/t/font_vujarmye95zpk3xr.woff') format('woff'),

        url('//at.alicdn.com/t/font_vujarmye95zpk3xr.ttf') format('truetype'),

        url('//at.alicdn.com/t/font_vujarmye95zpk3xr.svg#iconfont') format('svg');

    }

    4.页面引用

        html 中:

            <div class="myfont"> &#xeb7a</div>

        css 中:

        @font-face {

    font-family: 'iconfont';  /* project id 238765 */

    src: url('//at.alicdn.com/t/font_vujarmye95zpk3xr.eot');

    src: url('//at.alicdn.com/t/font_vujarmye95zpk3xr.eot?#iefix') format('embedded-opentype'),

    url('//at.alicdn.com/t/font_vujarmye95zpk3xr.woff') format('woff'),

    url('//at.alicdn.com/t/font_vujarmye95zpk3xr.ttf') format('truetype'),

    url('//at.alicdn.com/t/font_vujarmye95zpk3xr.svg#iconfont') format('svg');

    }

    .myfont{

    font-family:"iconfont" !important;

    font-size:16px;

    font-style:normal;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    }

    以上为在线引用

    -----------------------------------------------------------------------------------

    相关文章

      网友评论

          本文标题:iconfont的使用

          本文链接:https://www.haomeiwen.com/subject/hwziwttx.html