Vue項目中使用element-ui，並引入第三方圖標庫iconfont

element-ui官網

1、安裝

npm install element-ui --save-dev

2、在main.js文件中引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

3、上面兩步完成后，就可以在項目任意的組件中使用element-ui的組件了，具體使用方法，詳見官網

但是使用過程中，發現element-ui自帶的圖標特別少，不能滿足項目開發的需要，這就需要引入第三方圖標庫了。

Iconfont-阿里巴巴矢量圖標庫
1、點擊進入官網，注冊並登錄

2、登陸成功后，首頁的 圖標管理 => 我的項目 點擊進入

 

 3、點進來以后，是空的，點擊右邊紫色的添加一個項目

 

 

4、彈出的彈框，輸入關於項目的信息及設置，然后點擊新建，新建項目成功。下圖中紅框中是比較重要的兩項

Font Family 是設置這個項目圖標的公共類名

FontClass/Symbol 前綴  是設置這個項目的每個圖標的單獨類名的前綴，最好不要設置為"el-icon"，避免與element-ui自帶的圖標類名重復

 

 

5、項目創建成功后，就可以在搜索框中輸入我們需要的圖標關鍵字，會搜索出來很多的圖標，選擇需要的，加入購物車

 

 6、選擇完成以后，點擊右上角的購物車，然后點擊添加到項目，就會出現我們自己創建的項目，選中，點擊確定就添加成功

 

 7、添加成功以后，項目中就有我們需要的圖標了，然后下載到本地，並加壓下載的壓縮包

 

 

8、解壓出來的文件夾下有10個文件，demo的四個文件是圖標使用的例子，介紹了圖標使用的三種方式，

我們在項目中使用 fontclass方法，因此需要用到下圖中畫紅線的五個文件。

 

 9、在項目src/assets文件夾下，創建一個名為icon的文件夾，把需要用到的五個文件拷貝進去

 

 

10、在項目的main.js中引入圖標樣式文件

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

11、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"; }

12、挑選相應圖標並獲取類名，應用於頁面： 

<i class="iconfont icon-xxx"></i>

13、在element-ui輸入框中使用我們引入的圖標

<template>
  <div class="login">
    <el-form ref="form" :model="userForm" label-width="80px">
      <el-form-item label="賬號：">
        <el-input prefix-icon="iconfont icon-yonghu" v-model="userForm.account"></el-input>
      </el-form-item>
      <el-form-item label="密碼：">
        <el-input prefix-icon="iconfont icon-password" v-model="userForm.passward"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">登錄</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
export default {
  name: 'login',
  data () {
    return {
      userForm: {
        account: '',
        passward: ''
      }
    };
  }
};
</script>
 
<style lang="scss" scoped>
  .login{
    width: 300px;
    margin: 0 auto;
  }
</style>

 

 

轉載:https://blog.csdn.net/sleepwalker_1992/article/details/82818970

 

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------

 

 

 

 

 

 

轉載：https://www.jikeyuan.cn/a/177.html