iconfont的使用

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;

}


以上为在线引用

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基础环境 1.使用的矢量图标库:http://www.iconfont.cn/ 2.需要账号登陆 ,名下会有对应的...
    Dorazzz阅读 1,861评论 0 0
  • 什么是IconFont 所谓IconFont, 就是利用图标生成的字体。原理与汉字和emoji一样, 每一个图标对...
    Z哥阅读 1,973评论 0 51
  • 在学习weex的过程中看到了常用标签相关的内容,为了自己以后能够快速查阅特整理出此文档。 a 简介组件定义了指向某...
    TyroneTang阅读 4,722评论 1 3
  • 在线iconfont的使用方法 阿里巴巴矢量图标库http://www.iconfont.cn/ 注册账户登陆 搜...
    尧先生阅读 1,358评论 2 3
  • iconfont是将图片以字体的形式展示的一种方法,清晰易缩放而且文件体积小,可以直接通过修改字体颜色和大小来改变...
    ___Lynn阅读 1,297评论 0 0