1.背景

2.element圖標庫使用

假設要做一個如下效果

代碼如下:

    <!-- 輸入框-->
      <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>
        <!-- 按鈕區域 -->
        <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

當然我們應該找到我們需要的圖標庫,如下:

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

這里有很多圖標可以供大家使用,只要復制圖標下面的名稱運用即可

如果element的圖標庫中沒有自己滿意的圖標呢,大家還可以去找其他平臺的圖標庫,如案例云圖標庫

注意:這里僅僅供大家學習,因為有的圖標庫是有版權的

3.阿里云圖標庫使用

使用方式與上面一樣簡單

阿里圖標庫官網:

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

使用步驟:

1.下載圖標css

2.引用css到項目

3.在標簽中使用圖標

完美!

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。