码迷,mamicode.com
首页 > 其他好文 > 详细

【原创】1.1关于阿里图标引用问题简介

时间:2017-08-12 12:39:29      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:标签   离线应用   auto   下载   复制   亲测   images   技术分享   运行   

一、阿里字体离线应用步骤:

  1、访问阿里字体库,将需要的图标添加至自己创建指定的项目;

  2、下载至本地;

  3、解压缩,新建css、font文件夹,将相应的文件夹复制粘贴到对应路径,如图所示:


技术分享

  

    放入指定文件夹:


技术分享

 


  4.link引入css外部样式表

二、在线阿里字体引用步骤

  1、使用账号登录阿里字体,选择需要的图标放入购物车样式的图标中,选择“添加至项目”选项

技术分享

 

  2、按照如下图所示步骤添加至项目


技术分享


  3、“查看在线链接”→生成在线代码


技术分享

 

   4、复制,粘贴至css样式表

 

技术分享

 

  5、编辑html文件

 

技术分享

 

  复制图标代码,添加至html文件的 i 标签中

技术分享

 

    完整样例代码如上,①标记处类名可自取(尽量不要取关键字)

  6、代码运行结果如下:


技术分享

    个人亲测所得,如有不足之处,请多指教。(若转载请注明出处)

 

【原创】1.1关于阿里图标引用问题简介

标签:标签   离线应用   auto   下载   复制   亲测   images   技术分享   运行   

原文地址:http://www.cnblogs.com/ilaozhao/p/7349750.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!