开发者社区> 青年码农> 正文

Vue项目使用iconfont图标库

简介: Vue项目使用iconfont图标库
+关注继续查看

最近一直在更新Vue项目中配置及使用一些内置的方法,今天讲一讲Vue项目中使用iconfont图标库,不管是管理平台还是官网展示之类的显示页面,都会用到一些小图标,如果我们用img标签,那我们的资源库会非常的大,而且后期如果我们针对图标调整大小,改色等之类的操作,就需要用到Photoshop等专业类工具,上手困难不说,而且比较麻烦,下面就说下Vue使用iconfont图标库。

1.配置iconfont

首先要有个账号,用github关联就行,官网地址:

https://www.iconfont.cn/

登录成功,新建项目,我这里叫测试项目,这个FontClass前缀不要动,之后会用到

image.png

开始找我们需要用到的图标,添加到我们新建的项目中

image.png

生成可用文件,可以下载,然后在index.html里面引用,这里我们讲另一种方案,动态生成引用,

image.png

下面这个地址,是我们待会用到的

image

到这,iconfont图标库这块操作完了,接下来就是在我们的项目中使用这个图标库了。

2.项目使用iconfont

在我们的Vue项目public/index.html中加入如下代码

[class^="icon"] {
    font-family: "iconfont" !important;
    font-size: 18px !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

复制

为了后期可能引用多个iconfont项目,我们新建文件,放在src/utils/config.js文件中,

/**
 * 阿里iconfont配置
 * 
 **/
let iconfontVersion = ['1825821_mblutuw3v5', '1135504_1ya3oa1kraz']
let iconfontUrlCss = `//at.alicdn.com/t/font_$key.css`
export {
    iconfontUrlCss,
    iconfontVersion,
}

复制

还需要个动态插入css的方法

/**
 * 动态插入css
 */
export const loadStyle = url => {
    const link = document.createElement('link')
    link.type = 'text/css'
    link.rel = 'stylesheet'
    link.href = url
    const head = document.getElementsByTagName('head')[0]
    head.appendChild(link)
}

复制

在main.js文件中导入

// 动态生成css引用
import {
    iconfontUrlCss,
    iconfontVersion
} from '@/utils/config'
import {
    loadStyle
} from './utils/util'
iconfontVersion.forEach(ele => {
    loadStyle(iconfontUrlCss.replace('$key', ele))
})

复制

这样,项目中就动态引入iconfont图标库,可以正常使用了,

<i class="iconquanping" style="height:30px;"></i>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
16646 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
13574 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
36447 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14900 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29152 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23580 0
+关注
青年码农
公众号【青年码农】:有趣、有料,有深度、有广度、有热度。
225
文章
3
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载