vue之element圖標庫使用與第三方阿里雲圖標庫使用

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.在標簽中使用圖標

完美!