标签：cli 自定义 url quasar fonts iconfont .. font css

quasar cli如何自定义图标库(iconfont成功!!）

  !!!仅适合小白食用，大佬请指教。。。
  这篇教程主要是记录自己解决问题的一个的经过,网上查询了很久,都没有找到合适的。
  “众里寻他千百度，蓦然回首那人却在灯火阑珊处。”官网其实是有教程的，需要有耐心的人才能发现。
  附上官网地址：http://www.quasarchs.com/vue-components/icon
  好了,言归正传,下面请看演示吧!!!

一、处理下载后的iconfont.css文件

// 此处的的路径是处理过的,可以按照这个酌情更改
// url内的路径是可以自定义的
// 我的字体样式是放在quasar脚手架自动生成的css文件中的,酌情修改
@font-face {font-family: "iconfont";
  src: url('../fonts/iconfont.eot'); /* IE9 */
  src: url('../fonts/iconfont.eot') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/iconfont.woff2') format('woff2'),
  url('../fonts/iconfont.woff') format('woff'),
  url('../fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('../fonts/iconfont.svg') format('svg'); /* iOS 4.1- */
}

// 此处的类名应该和配置好的类名保持一致
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 以下为具体的图标
.icon-zhuye:before {
  content: "\e606";
}

二、匹配类名

在App.vue中的created()钩子函数中添加配置具体代码如下，仅供参考

// 此处为App.vue文件，以
<script>
export default {
  name: 'App',
  created () {
    this.$q.iconMapFn = (iconName) => {
      // iconName是图标"name"属性的内容
      // iconName对应的是在标签中填写的图标类名

      // 自定义匹配规则，此处是以iconfont为例的，
      // 可以根据自己的图标库，指定规则
      if (iconName.startsWith('icon-') === true) {
        const name = iconName
        return {
          // 最后将处理过的类名传出来
          // cls: 处理过的类名  注意: 此处属性名必须为"cls"
          cls: 'iconfont ' + name
        }
      }
    }
  }
}
</script>

三、引入css文件

• 在根目录下的quasar.conf.js中添加路径
• 如果没有其他图标库的需求可以将quasar.conf.js中的extras内关于字体图标的项注释掉

// 此处为部分代码
...
boot: [
  'axios',
],
css: [
  'app.css',
  'iconfont.css' // 新增iconfont.css
],
...

最后：附上效果图:

标签：cli,自定义,url,quasar,fonts,iconfont,..,font,css
来源： https://www.cnblogs.com/yous1r/p/14315103.html

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