通过cdn引入的方式引入elementui,并修改主题色——基础提升——字体图标不展示问题
最近在写一个apicloud框架开发的安卓程序,由于是个后台管理系统的页面,所以我首先要引入的是vue+elementUi。cdn引入vue.js是简单的,直接从网上找到vue.js的链接或者将内容下载到本地,通过相对路径引入都是可以的。一定要注意:在cdn引入elementUi之前,一定要先引入vue.js才可以cdn引入elementUi,可以查看官网上提供的cdn引入的方法elementUi
·
最近在写一个apicloud
框架开发的安卓
程序,由于是个后台管理系统的页面,所以我首先要引入的是vue
+elementUi
。
cdn
引入vue.js
是简单的,直接从网上找到vue.js
的链接或者将内容下载到本地,通过相对路径引入都是可以的。
一定要注意:在cdn引入elementUi之前,一定要先引入vue.js才可以
cdn
引入elementUi
,可以查看官网上提供的cdn
引入的方法
elementUi
提供的样式中,默认的主题色是一种蓝色,但是我们公司现在的主题色是#f90
,所以需要更改主题色:
cdn
引入的elementUi
更改主题色
更改图标字体的主题色
找到自定义主题
,打开在线主题生成工具
点击颜色选择器
,输入色值
后,按下回车键,点击确定
,即可实现主题色的切换
下载下来后,解压,是个fonts
字体文件夹,因为图标的颜色也需要跟随主题色更改:
更改字体或者边框等的主题色
此时,仅仅是完成了字体图标主题色的更改,还需要更改其他的主题色,比如普通字体的主题色,边框的主题色,hover
上去的主题色等。
此时可以通过将cdn
的elementUi.css
打开线上链接,然后下载到本地后,批量更改主题色,已知现有的主题色是:#409eff
,可以通过ctrl+H
,批量实现主题色的替换操作。
将上面步骤中的fonts
拷贝到elementUi.css
的同级目录下,然后在页面中引入elementUi.css
,否则图标不展示。
完成!!!
更多推荐
已为社区贡献69条内容
所有评论(0)