标签：assets symbol iconfont vue2 font css 图标

官方文档：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code

0. 准备工作

• 选择合适的图标，加入购物车
• 点击购物车，把图标加入项目（如果没有项目则新建一个）
• 注意：项目中新增了图标后，需要重新“下载到本地”,然后替换所需文件

1. font-class 引用

• 进入“我发起的项目”，选择项目，切换选项卡为“Font class”
• 点击“下载到本地”，下载一个压缩包，解压
• 压缩包内的文件有很多，但我们需要的只有:
  iconfont.css
  iconfont.ttf
  iconfont.woff
  iconfont.woff2
• 把上面四个文件放入项目 assets 下，可以分开放，也可以放在一起
  
• 把 src 中的url 换成本地文件的地址（原因：https://www.cnblogs.com/tblog/p/4738816.html）
  
  
• 修改代码
  

  App.vue
  // icon-xxx 去项目里复制代码名字
  <i class="iconfont icon-xxx" style="color:blue"></i>
  
  <style scoped>
  @import "../assets/css/iconfont.css";
  </style>

   如果需要修改 iconfont 的大小和颜色， 可在 iconfont.css 中修改，font-size 控制大小，color 控制颜色。

2. symbol 引用

• 进入“我发起的项目”，选择项目，切换选项卡为“Font class”
• 点击“下载到本地”，下载一个压缩包，解压
• 压缩包内的文件有很多，但我们需要的只有: iconfont.js
• 把js文件放入项目 assets 下
  
•  修改代码
  

  App.vue
  <svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
  </svg>
  
  mounted() {
  require("../assets/js/iconfont");
  },
  
  <style type="text/css">
  .icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: red;
  overflow: hidden;
  }
  </style>

　　如果需要修改 iconfont 的大小和颜色， 可在 .icon 中修改，width、height 控制大小，fill 控制颜色。

　　注意1：symbol 引用时，有的图标不能换颜色。
　　注意2：引入 symbol 后最好重启一下，有时候会报错“ 某个字母 assigned to itself ” ，如 'l' is assigned to itself no-self-assign

 源码：

font-class

<template>
  <div>
    <div>vue中使用 iconfont 阿里巴巴在线生成的字体图标 -- font class</div>
    <p>用 color 指定颜色</p>
    <hr>
    <i class="iconfont icon-iconfont5" style="color:blue"></i>
    <i class="iconfont icon-iconfontxingxing"></i>
    <i class="iconfont icon-iconfontmingpian"></i>
    <i class="iconfont icon-iconfontriyongbaihuo"></i>
    <i class="iconfont icon-iconfontshipin"></i>
    <i class="iconfont icon-iconfontwujingongju"></i>
    <i class="iconfont icon-iconfontyundonghuwai"></i>
    <i class="iconfont icon-iconfontgongyichongwu"></i>
    <i class="iconfont icon-iconfontyundonghuwai"></i>
    <i class="iconfont icon-iconfontphone"></i>
    <i class="iconfont icon-iconfont-shanzi"></i>
  </div>
</template>

<script>
</script>

<style scoped>
  @import "../assets/css/iconfont.css";
  i{
    margin: 5px;
    font-size: 50px;
    color: red;
  }
</style>

symbol

<template>
  <div>
    <div>vue中使用 iconfont 阿里巴巴在线生成的字体图标 -- symbol</div>
    <p>用 fill 指定颜色</p>
    <hr />
    <svg class="icon" aria-hidden="true" style="fill: green">
      <use xlink:href="#icon-iconfont5"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontxingxing"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontmingpian"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontriyongbaihuo"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontshipin"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontwujingongju"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontgongyichongwu"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontyundonghuwai"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfontphone"></use>
    </svg>
    <!-- 扇子图形本身不能变色 -->
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-iconfont-shanzi"></use>
    </svg>
  </div>
</template>

<script>
export default {
  mounted() {
    require("../assets/js/iconfont");
  },
};
</script>

<style type="text/css">
.icon {
  width: 4em;
  height: 4em;
  margin: 5px;
  vertical-align: -0.15em;
  fill: red;
  overflow: hidden;
}
</style>

标签：assets,symbol,iconfont,vue2,font,css,图标
来源： https://www.cnblogs.com/sunshine233/p/16521002.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。