码迷,mamicode.com
首页 > 其他好文 > 详细

vue图标制作

时间:2019-10-31 09:15:59      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:项目   制作   firefox   opera   创建项目   android   巴巴   dde   vue   

方法一:

  1.进入阿里巴巴矢量图标库网站 https://www.iconfont.cn 

  2.创建项目

  3.进入图标库中选取所需图标 添加到购物车 然后添加到创建的项目中

  4.点击下载至本地 解压文件

  5.在src目录下的assets目录下的styles文件中创建iconfont文件夹

  6.将解压文件中 iconfont.woff iconfont.eot iconfont.svg iconfont.ttf 四个文件 放入创建的 iconfont文件夹中

  7.将解压文件中的 iconfont.css 文件放入 src目录下的assets目录下的styles文件夹中

  8.进入 iconfont.css 更改图标路径 

  src: url(‘./iconfont/iconfont.eot?t=1572451090913‘); /* IE9 */
  src: url(‘./iconfont/iconfont.eot?t=1572451090913#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
  url(‘./iconfont/iconfont.woff?t=1572451090913‘) format(‘woff‘),
  url(‘./iconfont/iconfont.ttf?t=1572451090913‘) format(‘truetype‘), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url(‘./iconfont/iconfont.svg?t=1572451090913#iconfont‘) format(‘svg‘); /* iOS 4.1- */

     iconfont就可以使用了

   9.使用iconfont:在入口文件main.js中全局引入iconfont文件

import ‘./assets/styles/iconfont.css‘; //引入图标文件

    在要使用的组件中使用iconfont图标 ( 在span标签中使用 打开iconfongt官网 进入项目 所需图标上有复制代码 复制代码便可)

            <!-- &#xe606; 就是复制的图标代码-->
            <span class="iconfont">&#xe606;</span>

vue图标制作

标签:项目   制作   firefox   opera   创建项目   android   巴巴   dde   vue   

原文地址:https://www.cnblogs.com/rickyctbur/p/11768984.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!