iconfont字体使用彩色图标

╰+攻爆jí腚メ 2021-08-13 13:43 765阅读 0赞

1.先将选择好的图标加入购物车

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70

2.然后添加至项目，可以选择已有项目或者新建的项目

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1

3.然后进入项目，点击下载到本地

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 2

4.下载好的文件放入合适的目录下

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 3

使用方法可以打开上图的index.html查看

彩色图标使用symbol中的引入方式

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 4

1.注意vue使用的时候一定要将iconfont.js文件引入到main.js中，使用import引用

（使用普通单色的图标引入的是inconfont.css文件）

2.vue项目将下面代码放入app.js中，普通项目引用到使用iconfont的本页面就可以

20191112103403581.png

3.挑选相应iconfont图标，获取类名，进行使用

20191112103459996.png

  1. <style>
  2. .icon {
  3.   width: 1em;
  4.   height: 1em;
  5.   vertical-align: -0.15em;
  6.   fill: currentColor;
  7.   overflow: hidden;
  8. }
  9. </style>
  14. <svg class="icon" aria-hidden="true">
  15.   <use xlink:href="#icon-xxx"></use>
  16. </svg>

发表评论

表情：
评论列表 （有 0 条评论，765人围观）

还没有评论，来说两句吧...

相关阅读

    相关 iconfont 支持全新的彩色字体图标

    一直以来，Web 中想要使用矢量的彩色图标只能通过 SVG 的方式，这极大的束缚了用户的想象力，为此，我们一直在不断地探索和尝试。在解决了各种难题之后，今天，我很自豪地宣布，i

    墨蓝墨蓝/ 0 赞/ 335 阅读