vue使用iconfont

发布时间:2021-05-31 09:46:09编辑:admin阅读(148)

    一、概述

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

    官方链接: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,会生成一段代码。

    1.png

     

     

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

    <template>
      <div>
        <i>&#xeabb;</i>
      </div>
    </template>
    <script>
      export default {
        name: '',
        data() {
          return {
          };
        },
        mounted() {
        },
        methods: {
        }
      };
    </script>
    <style 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>

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

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

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

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

     

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

    1.png

     

     

     

    本文参考链接:

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


关键字