icomoon使用详细介绍(vue)

前言

阿里图标库目前不能上传图标了，由于icon图标都是UI做好上传的，而且阿里官方库图标与页面结构不太符合，
导致在原有的icon阿里图标库之外，需要找到一个新的图标库进行引入
下面介绍icomoon图标库的使用

使用

官网地址

导入UI做好的svg格式图标

展示
生成文件导入本地使用

文件格式
项目中使用

页面需要对css文件做些处理，避免和引入的阿里图标库冲突

修改css文件：修改引入地址、页面全部icon标识改为icon1(避免阿里库icon冲突)、修改.icon1-xxx:before下如果有color样式，要删除（便于后面改颜色）

main.ts中引入
页面使用
```
  <i class="iconfont icon1-notice" />
```

复用性

  由于我们没登录，没有保存图标项目，而且浏览器缓存消失，官网上我们上传的图标就没了，咋办？

注意这个文件

我们的图标就会再回来

然后重复以上步骤即可

icomoon使用详细介绍(vue)相关推荐

详细介绍Vue的数据响应式
Vue.js的核心包括一套"响应式系统"."响应式",是指当数据改变后,Vue会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新 ...
如何使用字体图标——icomoon使用详细介绍
此篇博文讲述如何利用icomoon导入图标,从而把自己想要图标通过icomoon方式进行生成.大家都知道,网站以及移动端,用图标还是尽量选择这种.1.直接用image有些图标会失真:2.图标统一管理, ...
icomoon使用详细介绍
此篇博文讲述如何利用icomoon导入图标,从而把自己想要的都通过icomoon方式进行,大家都知道,网站以及移动端,用图标还是尽量选择这种.因为直接用image有些图标会失真,从而也是前端开发之中, ...
超详细的Vue渲染原理讲解
目录一.Vue简介 1. MVVM.MVP和MVC 2. Vue的基本配置二.Vue渲染原理 1. HTML与模板 2. Vue组件的完整渲染过程 (1). Vue自身的初始化阶段 (2). 组件 ...
Vue详细介绍及使用
Vue详细介绍及使用一.Vue定义及简介 1.Vue定义关于Vue简介,百度百科给出的解释是:Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设 ...
Vue详细介绍及使用（组件）
Vue详细介绍及使用一.Vue组件概念 1.基本的概念为什么需要组件化?在实际开发中,我们经常也会封装很多公共方法,达到复用的目的,也便于维护.对于前端也是一样,那么什么是组件? 官方定义 ...
详细介绍：如何用Vue完成喵喵电影项目？
Vue是web前端中重要的框架之一,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.所以,对于web前端开 ...
vue项目转apk详细介绍linux虚拟器远程连接逍遥模拟器
vue项目转apk详细介绍此篇文章为原创,转载请标明出处!!! 1.卸载centOs7自带的jdk,安装1.8版本上传后解压 tar -zxvf jdk-7u67-linux-x64.tar.gz ...
Vue.js 详细介绍
一.引言嘿嘿嘿,今天是2019年2月23号,这个年也算是过完了.小编也要渐渐的恢复以往写博客的习惯,新的一年公司在项目架构上有了很大的变化.从之前的SSM换成了Spring cloud分布式架构,也 ...

icomoon使用详细介绍(vue)

前言

使用

icomoon使用详细介绍(vue)相关推荐

最新文章

热门文章