vue使用iconfont

一、概述

国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具

官方链接:https://www.iconfont.cn/

二、使用

官方使用文档:https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.17&helptype=code

unicode引用

unicode是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持ie6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式

unicode使用步骤如下:

第一步:拷贝项目下面生成的font-face

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

第二步:定义使用iconfont的样式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

第三步:挑选相应图标并获取字体编码,应用于页面

<i class="iconfont">&#x33;</i>

实际演示

登录iconfont账户,查看项目。这里会显示很多图标,点击Unicode,会生成一段代码。

新建一个vue文件,比如:test.vue

<template>
  <div>
    <i class="iconfont">&#xeabb;</i>
  </div>
</template>
<script>
  export default {
    name: '',
    data() {
      return {
      };
    },
    mounted() {
    },
    methods: {
    }
  };
</script>
<style lang="scss" scoped>
  @font-face {
    font-family: 'iconfont';  /* Project id 1230495 */
    src: url('//at.alicdn.com/t/font_1xxxxxxxxx') format('woff2'),
    url('//at.alicdn.com/t/font_xxxxxxx') format('woff'),
    url('//at.alicdn.com/t/font_xxxxxx') format('truetype');
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 24px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    /*color: #ccc;*/
  }
</style>
View Code

注意:请根据实际情况修改<i></i>和@font-face{}里面的内容。

这里仅仅作为演示,实际生产情况,应该将<style></style>里面的内容,封装到一个公用的scss文件。这样每一个vue文件,就可以应用到了。

关于scss全局引用,请参考链接:

https://www.cnblogs.com/xiao987334176/p/14778241.html

访问网页,就可以看到图标了

本文参考链接:

https://www.cnblogs.com/wenbinjiang/p/11165762.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值