1.背景

2.element圖標(biāo)庫(kù)使用

假設(shè)要做一個(gè)如下效果

代碼如下:

    <!-- 輸入框-->
      <el-form  label-width="0px" class="login_form">
        <!-- 用戶名 -->
        <el-form-item >
          <el-input  prefix-icon="el-icon-s-custom"></el-input>
        </el-form-item>
        <!-- 密碼 -->
        <el-form-item >
          <el-input  prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <!-- 按鈕區(qū)域 -->
        <el-form-item >
          <el-button type="primary">登錄</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>

大家可以查看element官方的使用方式

官方鏈接:https://element.eleme.cn/#/zh-CN/component/input

當(dāng)然我們應(yīng)該找到我們需要的圖標(biāo)庫(kù),如下:

官方鏈接:https://element.eleme.cn/#/zh-CN/component/icon

這里有很多圖標(biāo)可以供大家使用,只要復(fù)制圖標(biāo)下面的名稱運(yùn)用即可

如果element的圖標(biāo)庫(kù)中沒(méi)有自己滿意的圖標(biāo)呢,大家還可以去找其他平臺(tái)的圖標(biāo)庫(kù),如案例云圖標(biāo)庫(kù)

注意:這里僅僅供大家學(xué)習(xí),因?yàn)橛械膱D標(biāo)庫(kù)是有版權(quán)的

3.阿里云圖標(biāo)庫(kù)使用

使用方式與上面一樣簡(jiǎn)單

阿里圖標(biāo)庫(kù)官網(wǎng):

https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4

使用步驟:

1.下載圖標(biāo)css

2.引用css到項(xiàng)目

3.在標(biāo)簽中使用圖標(biāo)

完美!

總結(jié)

以上是生活随笔為你收集整理的vue之element图标库使用与第三方阿里云图标库使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。