elemntui icon 大小_vue-elementui 引入第三方iconfont图标 并使用彩色icon

使用element-ui中图标比较少，不够再项目中使用，我们引入阿里巴巴矢量图iconfont，并且使用彩色iconfont

vue-element使用iconfont教程

一、安装

npm install element-ui --save-dev

二、在main.js中引入

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

三、上面两步完成后，就可以在项目任意的组件中使用element-ui的组件了，具体使用方法，详见官网

但是使用过程中，发现element-ui自带的图标特别少，不能满足项目开发的需要，这就需要引入第三方图标库了。

四、点击创建项目

五、注意font-class不要与elementui的class有冲突

六、项目创建成功后，就可以在搜索框中输入我们想要找的图标关键字了，然后加入购物车，也可以加入购物车后对图标的颜色进行修改

七、选择完成以后，点击右上角的购物车，然后点击添加到项目，就会出现我们自己创建的项目，选中，点击确定就添加成功

添加至项目

八、添加成功以后，项目中就有我们需要的图标了，然后下载到本地，并加压下载的压缩包

九、在项目src/assets文件夹下，创建一个名为icon的文件夹，把需要用到的五个文件拷贝进去

十、在项目的main.js中引入图标样式文件

import './assets/icon/iconfont.css';

十一、iconfont.css文件中.iconfont类 设置我们引入的图标的整体的样式 ，.icon-xxx:before是我们引入的每一个图标， 我们可以通过在.icon-xxx中写样式，单独设置某一个图标的样式

@font-face {font-family: "iconfont";

src: url('iconfont.eot?t=1537677824075'); /* IE9*/

src: url('iconfont.eot?t=1537677824075#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAUEAAsAAAAAB2wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8hkg1Y21hcAAAAYAAAABWAAABhmV10O5nbHlmAAAB2AAAATgAAAFQ16dO6WhlYWQAAAMQAAAALgAAADYSubn+aGhlYQAAA0AAAAAcAAAAJAfeA4RobXR4AAADXAAAAAwAAAAMDAAAAGxvY2EAAANoAAAACAAAAAgAOgCobWF4cAAAA3AAAAAeAAAAIAEQAE5uYW1lAAADkAAAAUUAAAJtPlT+fXBvc3QAAATYAAAAKgAAADvLYFe3eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeCTxzZm7438AQw9zA0AAUZgTJAQDjbgw2eJztkLERgDAMA99OSMFRMAYFW2QJKsbPGkFxYAt099ZZdiVgAZI4RQa7MYYupRZ5Yo08x0+RG972VnuHzyXTrYS7RuHXFvN4Nx9tTUazrU7wB1IlDpIAAHicTVC9SsNQGP2++5NYmoS2NDfpL42FpNQSMDa5lEKwCA6lin0B5zg4diqIvkBH0dUn6OYDCO4dM3W3jyBG7+jhLGc4PxygoEB75AcMaMAxAMaJH1jo2P2qV+V2Pw4xxUjYdU16sZ/ILupkp5+/PM+0a5IW3+NKGVtRy1gVn2x8fycpfmTmu6mYFbf4tssy9PxeV7jtXdZa60frJhCA3ycG9BHKMAPgPgQJSAGOBtRCvS6cRMgU+1LzAy0kZyEqpYodoemRRdS6wPGFIxInRTWPQF7sOUcvz9HjvNjn2wObRAM3ng4RSadkGYRUGCPs5uLqkiJjFUIMq9QhiMNp7A6iCft6+O9XefSVHbbLjawR27UXOExouxM1R2Y453wemqPmabdN4xNcYL1hY01ultuDevIPlrRCh3icY2BkYGAA4qUXj6+O57f5ysDNwgAC189aI9H/G1kYmBuADA4GJpAoAEE1CmgAAHicY2BkYGBu+N/AEMPCAAJAkpEBFTADAEcJAmwEAAAABAAAAAQAAAAAAAAAADoAqHicY2BkYGBgZnACYhBgAmIuIGRg+A/mMwAAD1IBXwAAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAmZGJkZmRhYGjILG4uDy/KIWtMj8vPaOUgQEAQbkGNwAA') format('woff'),

url('iconfont.ttf?t=1537677824075') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url('iconfont.svg?t=1537677824075#iconfont') format('svg'); /* iOS 4.1- */

}

.iconfont {

font-family:"iconfont" !important;

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.icon-password:before { content: "\e610"; }

.icon-yonghu:before { content: "\e643"; }

十二、挑选相应图标并获取类名，应用于页面：

十三、在element-ui输入框中使用我们引入的图标

登录

export default {

name: 'login',

data () {

return {

userForm: {

account: '',

passward: ''

}

};

}

};

.login{

width: 300px;

margin: 0 auto;

}

十四、那么如何使用彩色图标呢

我们需要引入iconfont.js这个文件

十五、在APP.vue加入公共样式代码

.icon {

width: 1em;

height: 1em;

vertical-align: -0.15em;

fill: currentColor;

overflow: hidden;

}

十六、挑选对应的类名，注意#号后面是font-class类名

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=25di5sopzwasg

AD：阿里云2000元代金券九折优惠点我领取 ￥2000元大礼包

AD：腾讯云2860元无门槛代金券，限时领取点我领取 ￥2860无门槛代金券