iconfont的使用

2017-02-24  本文已影响0人  Doit的谎言

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;

}

以上为在线引用

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

上一篇 下一篇

猜你喜欢

热点阅读