在iview+vue项目中使用自定义icon图标方式

目录
  • 1. UI设计师会把自己做的图标库上传到阿里巴巴图标库
  • 2. 到购物车中点击添加至项目
  • 3. 给项目起个名字
  • 4. 把下面这些文件放到我的项目的static中
  • 5. 在main.js中全局引入iconfont.css
  • 6. 打开刚才下载好的文件里的demo_index.html
  • 7. 在我的路由中加入icon配置
  • 8. 看结构才发现font-family还是默认的iview设置好的
  • 9. 所以要改变font-family的设置
  • 10. 这样就完美的解决了

最近做一个后台管理系统，是用iview+vue cli2做的，在做的过程中需要将左侧的导航栏加入icon图标，但是iview库里的图标和UI要求不符，这就需要引入自己的图标库。

1. UI设计师会把自己做的图标库上传到阿里巴巴图标库

打开设计师给的图标库地址，把所有要用到的图标点击加入购物车

2. 到购物车中点击添加至项目

3. 给项目起个名字

点击确定，然后点击下载至本地

4. 把下面这些文件放到我的项目的static中

新建文件夹iconfont中

5. 在main.js中全局引入iconfont.css

6. 打开刚才下载好的文件里的demo_index.html

里面有三种形式的引用方式，我用的是class的方式，直接复制下面的class名即可

7. 在我的路由中加入icon配置

我以为能够正常显示了，发现根本就没显示出来

8. 看结构才发现font-family还是默认的iview设置好的

而自己引入的图标需要设置成 font-family: 'iconfont'

9. 所以要改变font-family的设置

注意这里不能再全局设置，开始我全局设置导致其他iview图标也会不显示，所以要找到左侧导航栏对应的文件，在其对应的结构中加入行内样式

10. 这样就完美的解决了

既能在左侧引入自定义图标也不会影响其他地方使用的iview图标

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在Vue中使用icon 字体图标的方法

    1.使用线上的阿里iconfont图标库 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3 生成链接 4在我们的vue项目中,找到index.html文件,引入css样式,记住这里要放上你的链接地址 5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个. 2但是考虑网络及用户体验 阿里iconfont下载本地使用 1 阿里iconfont图标直接下载到本地 2 在assets文件下创建iconfont文件夹

  • Vue项目中如何引入icon图标

    1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标.点击进入icomoon网站点击右上角"IcoMoon App",找到自己需要的图标后选择然后点击右下角"Generate Font",接着可以在左上角第二个按钮"Preferences"进行自定义你要下载的图标信息,一般我都是进去改一下"Font Name",然后返回点击右下角"Do

  • vue使用自定义icon图标的方法

    首先因为elementUI提供的icon太少了,所有自己找找有没有矢量图可以补充的,尝试多种方法,觉得下面方法简单易懂,分享给大家 效果图: 推荐使用阿里爸爸矢量图标管理,iconfont 使用方法 登录账号,找到需要的图标加入购物车 然后添加到项目 再然后下载代码到本地 下载代码文件然后解压出现这列表 打开HTML文件,引用方法教程 补充我人的坑,之前想着在style标签里@import "",结果一直报错,试了很多方法还是没效果,把问题想复杂了 第一步:在index.html引入f

  • vue 自定义icon图标的步骤

    vue 自定义icon图标的步骤

    ant-design-vue自定义使用阿里iconfont图标\ 第一步:从iconfont获取项目js链接 第二步 在需要引用iconfont的页面处加入 在Deom中使用: <a> <Fonts type='icon-zutaishitu'/> </a> import { Icon } from 'ant-design-vue'; const Fonts = Icon.createFromIconfontCN({ scriptUrl: '//at.alicdn.co

  • vue element项目引入icon图标的方法

    为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库 阿里巴巴图标网站: http://www.iconfont.cn/ 下面具体介绍如何使用 1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建. 2.点击添加到项目后,选中第二个 3.点击更多操作里面的

  • 在iview+vue项目中使用自定义icon图标方式

    在iview+vue项目中使用自定义icon图标方式

    目录 1. UI设计师会把自己做的图标库上传到阿里巴巴图标库 2. 到购物车中点击添加至项目 3. 给项目起个名字 4. 把下面这些文件放到我的项目的static中 5. 在main.js中全局引入iconfont.css 6. 打开刚才下载好的文件里的demo_index.html 7. 在我的路由中加入icon配置 8. 看结构才发现font-family还是默认的iview设置好的 9. 所以要改变font-family的设置 10. 这样就完美的解决了 最近做一个后台管理系统,是用ivi

  • Vue项目中使用自定义字体样式方式

    目录 Vue使用自定义字体样式 步骤一 步骤二 步骤三 步骤四 全局自定义字体,提高项目字体美化 1.创建font文件夹 2.创建index.css 3.全局注册 4.页面使用 Vue使用自定义字体样式 步骤一 拿到自定义字体包 首先要得到自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),可自行下载也可以问UI要字体包. 步骤二 在项目文件夹中进行放置自定义字体包的配置 在项目assets文件夹下新建font文件夹,将拿到的字体包放在font文件夹中: 新建一个font.c

  • vue项目中更改名字和图标的简单实现步骤

    vue项目中更改名字和图标的简单实现步骤

    目录 引言 更改项目名称: vue更改图标 事情没有结束: 总结 引言 Vue项目开发最后一步:更改项目名称和图标. 没想到这一步卡了我两个多小时. 更改项目名称: 找到index.html打开,修改. 刷新/重新运行项目或者重装node_modules(建议选择第二种) 在packgage两个地方修改一共三处name,切记要英文名字,否则会报错:throw new Error("Invalid name: " + JSON.stringify(name)) Error: Invali

  • vue项目中锚点定位替代方式

    在vue项目中,使用锚点定位会和router的规则冲突,在项目中的表现就是第一次点击url改变了,但是没有跳转到锚点位置,再次点击才会跳转.所以在vue项目中定义一个方法不适用锚点定位: scrollToSection() { let section = document.getElementById('section') if (section) { section.scrollIntoView() } } html标签中绑定click事件就可以了 以上这篇vue项目中锚点定位替代方式就是小编

  • vue项目中封装echarts的优雅方式分享

    vue项目中封装echarts的优雅方式分享

    目录 场景 需求 代码总览 实现 components--chart--index.vue components--chart--index.js components--chart--options main.js chartTest index.vue index.js 代码 总结 补充 补充2:图表高亮轮询,dispatchAction使用 使用方法 附:echarts 饼图调用高亮示例 dispatchAction 补充3:封装echarts地图,姐妹篇 总结 场景 1.Echarts使

  • vue项目中轮询状态更改方式(钩子函数)

    目录 vue项目中轮询状态更改 vue轮询方法及清除 vue项目中轮询状态更改 在实际项目中,对于实时存储改变的数据,如果不是使用websoct,就需要使用到轮询,对于轮询实际是前端设置的定时器,不停存储获取数据并进行更改. 而对于退出该界面后,轮询逻辑依然在定时器的执行中进行,此时需要用到钩子函数判断路由离开状态后,进行清除定时器 //离开当前页面 beforeRouteLeave(to, from, next) { window.clearInterval(this.myInterval);

  • vue项目中使用pinyin转换插件方式

    目录 使用pinyin转换插件 vue实现汉字转拼音 1.建文件 const.js 2.vue-py.js文件 3.项目中使用 使用pinyin转换插件 npm install js-pinyin 具体使用的文件中 import import pinyin from '../../../node_modules/js-pinyin/index' 使用 console.log(pinyin.getFullChars('管理员')) //GuanLiYuan; console.log(pinyin.

  • vue项目中应用ueditor自定义上传按钮功能

    vue项目中应用ueditor自定义上传按钮功能

    由于上传地址问题,需要自定义上传按钮,效果如图 由于在页里面没有操作dom,所以想到了用vue的 自定义事件绑定$emit .$on来把点击事件传递给ueditor. 首先是给ueditor添加自定义按钮: 1,打开ueditor.all.js,找到btnCmds,大概在27854行,如下图,在数组添加一个自定义的按钮名称,我写的是"love" ueditor.all.js 2,给按钮添加事件 还是在ueditor.all.js文件内找到commands指令 给刚才定义的按钮扩展事件,

  • 在vue项目中引用Iview的方法

    关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 特性 # 高质量.功能丰富 友好的 API ,自由灵活地使用空间 细致.漂亮的 UI 事无巨细的文档 可自定义主题 iview 安装 npm install iview --save 引入iview import Vue from 'vue' import App from './App' import router from './router' import iView fro

随机推荐