如何在项目中引入icon

进入官网之后需要登录,可以直接选择GitHub登录或者微博登录,登录之后搜索需要的icon,并加入到购物车。


加入购物车
  • 2. 将icon加入到指定项目

选好icon之后点击页面右上角的购物车,点击添加到指定的项目,如果之前没有项目就新建项目。


添加到指定项目
  • 3. 通过在线引入的方式将icon引入到项目中

进入到添加的项目中,选择symbol,点击生成代码:

点击生成代码

点击使用帮助

找到symbol使用

在帮助文档中找到symbol使用,拷贝上面symbol点击生成的代码(不是文档中的symbol代码)到全局引入.js文件的地方,比如:

<body>
    <script src="//at.alicdn.com/t/font_2541171_6j176nunsfb.js"></script>
</body>

在需要引入icon的.html中添加css(最好在项目中全局定义)。

    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }

在需要引入icon的位置加入如下内容进行引入该icon

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

此处的#icon-xxx需要换为项目中的icon的名称

image.png

  • 4. 通过本地引入的方式引入icon

本地引入时将symbol下生成的代码粘贴到浏览器地址栏中;


粘贴代码到浏览器地址栏

将浏览器中的内容另存为一个.js文件,比如保存为icon.js,将该.js文件保存到项目指定位置,并在全局中引入该.js文件,并删除在线引入的方式。比如:

<body>
    <!--  <script src="//at.alicdn.com/t/font_2541171_6j176nunsfb.js"></script> -->
    <script src="/src/global/icon/icon.js"></script>
</body>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 步骤实现:1.在http://www.iconfont.cn/里面下载需要用的图表,在例子里面我们引入的是散点图。...
    kim_jin阅读 451评论 0 0
  • vue如何在创建好的项目中引入阿里图标iconfont呢,涉及到以下几个步骤: 1、首先先到阿里图标官方网站htt...
    星期一研究室阅读 5,165评论 0 0
  • 正片之前先推广下阿里的Iconfont,图库丰富,支持个性化定制,只需添加需要的图标,创建项目下载到本地,放在项目...
    我的代码果然有问题阅读 8,378评论 1 13
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 8,595评论 28 53
  • 信任包括信任自己和信任他人 很多时候,很多事情,失败、遗憾、错过,源于不自信,不信任他人 觉得自己做不成,别人做不...
    吴氵晃阅读 6,225评论 4 8