004_Icon图标

已于 2022-02-18 21:25:56 修改
阅读量1.8k 收藏 7
点赞数
分类专栏： element-ui 文章标签： elementui vue.js 前端
于 2022-02-15 20:41:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aihiao/article/details/122951843
版权

1. Icon图标

1.1. ElementUI提供了一套常用的图标集合。

1.2. 直接通过设置类名为el-icon-iconName来使用即可。

2. Icon图标例子

2.1. 使用脚手架新建一个名为element-ui-icon的前端项目, 同时安装Element插件。

 2.2. 编写App.vue

<template>
  <div id="app">
    <table>
      <tr>
        <td><i class="el-icon-platform-eleme"></i><br /><span class="text">el-icon-platform-eleme</span></td>
        <td><i class="el-icon-eleme"></i><br /><span class="text">el-icon-eleme</span></td>
        <td><i class="el-icon-delete-solid"></i><br /><span class="text">el-icon-delete-solid</span></td>
        <td><i class="el-icon-delete"></i><br /><span class="text">el-icon-delete</span></td>
        <td><i class="el-icon-s-tools"></i><br /><span class="text">el-icon-s-tools</span></td>
        <td><i class="el-icon-setting"></i><br /><span class="text">el-icon-setting</span></td>
        <td><i class="el-icon-user-solid"></i><br /><span class="text">el-icon-user-solid</span></td>
        <td><i class="el-icon-user"></i><br /><span class="text">el-icon-user</span></td>
        <td><i class="el-icon-phone"></i><br /><span class="text">el-icon-phone</span></td>
        <td><i class="el-icon-phone-outline"></i><br /><span class="text">el-icon-phone-outline</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-more"></i><br /><span class="text">el-icon-more</span></td>
        <td><i class="el-icon-more-outline"></i><br /><span class="text">el-icon-more-outline</span></td>
        <td><i class="el-icon-star-on"></i><br /><span class="text">el-icon-star-on</span></td>
        <td><i class="el-icon-star-off"></i><br /><span class="text">el-icon-star-off</span></td>
        <td><i class="el-icon-s-goods"></i><br /><span class="text">el-icon-s-goods</span></td>
        <td><i class="el-icon-goods"></i><br /><span class="text">el-icon-goods</span></td>
        <td><i class="el-icon-warning"></i><br /><span class="text">el-icon-warning</span></td>
        <td><i class="el-icon-warning-outline"></i><br /><span class="text">el-icon-warning-outline</span></td>
        <td><i class="el-icon-question"></i><br /><span class="text">el-icon-question</span></td>
        <td><i class="el-icon-info"></i><br /><span class="text">el-icon-info</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-remove"></i><br /><span class="text">el-icon-remove</span></td>
        <td><i class="el-icon-circle-plus"></i><br /><span class="text">el-icon-circle-plus</span></td>
        <td><i class="el-icon-success"></i><br /><span class="text">el-icon-success</span></td>
        <td><i class="el-icon-error"></i><br /><span class="text">el-icon-error</span></td>
        <td><i class="el-icon-zoom-in"></i><br /><span class="text">el-icon-zoom-in</span></td>
        <td><i class="el-icon-zoom-out"></i><br /><span class="text">el-icon-zoom-out</span></td>
        <td><i class="el-icon-remove-outline"></i><br /><span class="text">el-icon-remove-outline</span></td>
        <td><i class="el-icon-circle-plus-outline"></i><br /><span class="text">el-icon-circle-plus-outline</span></td>
        <td><i class="el-icon-circle-check"></i><br /><span class="text">el-icon-circle-check</span></td>
        <td><i class="el-icon-circle-close"></i><br /><span class="text">el-icon-circle-close</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-s-help"></i><br /><span class="text">el-icon-s-help</span></td>
        <td><i class="el-icon-help"></i><br /><span class="text">el-icon-help</span></td>
        <td><i class="el-icon-minus"></i><br /><span class="text">el-icon-minus</span></td>
        <td><i class="el-icon-plus"></i><br /><span class="text">el-icon-plus</span></td>
        <td><i class="el-icon-check"></i><br /><span class="text">el-icon-check</span></td>
        <td><i class="el-icon-close"></i><br /><span class="text">el-icon-close</span></td>
        <td><i class="el-icon-picture"></i><br /><span class="text">el-icon-picture</span></td>
        <td><i class="el-icon-picture-outline"></i><br /><span class="text">el-icon-picture-outline</span></td>
        <td><i class="el-icon-picture-outline-round"></i><br /><span class="text">el-icon-picture-outline-round</span></td>
        <td><i class="el-icon-upload"></i><br /><span class="text">el-icon-upload</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-upload2"></i><br /><span class="text">el-icon-upload2</span></td>
        <td><i class="el-icon-download"></i><br /><span class="text">el-icon-download</span></td>
        <td><i class="el-icon-camera-solid"></i><br /><span class="text">el-icon-camera-solid</span></td>
        <td><i class="el-icon-camera"></i><br /><span class="text">el-icon-camera</span></td>
        <td><i class="el-icon-video-camera-solid"></i><br /><span class="text">el-icon-video-camera-solid</span></td>
        <td><i class="el-icon-video-camera"></i><br /><span class="text">el-icon-video-camera</span></td>
        <td><i class="el-icon-message-solid"></i><br /><span class="text">el-icon-message-solid</span></td>
        <td><i class="el-icon-bell"></i><br /><span class="text">el-icon-bell</span></td>
        <td><i class="el-icon-s-cooperation"></i><br /><span class="text">el-icon-s-cooperation</span></td>
        <td><i class="el-icon-s-order"></i><br /><span class="text">el-icon-s-order</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-s-platform"></i><br /><span class="text">el-icon-s-platform</span></td>
        <td><i class="el-icon-s-fold"></i><br /><span class="text">el-icon-s-fold</span></td>
        <td><i class="el-icon-s-unfold"></i><br /><span class="text">el-icon-s-unfold</span></td>
        <td><i class="el-icon-s-operation"></i><br /><span class="text">el-icon-s-operation</span></td>
        <td><i class="el-icon-s-promotion"></i><br /><span class="text">el-icon-s-promotion</span></td>
        <td><i class="el-icon-s-home"></i><br /><span class="text">el-icon-s-home</span></td>
        <td><i class="el-icon-s-release"></i><br /><span class="text">el-icon-s-release</span></td>
        <td><i class="el-icon-s-ticket"></i><br /><span class="text">el-icon-s-ticket</span></td>
        <td><i class="el-icon-s-management"></i><br /><span class="text">el-icon-s-management</span></td>
        <td><i class="el-icon-s-open"></i><br /><span class="text">el-icon-s-open</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-s-shop"></i><br /><span class="text">el-icon-s-shop</span></td>
        <td><i class="el-icon-s-marketing"></i><br /><span class="text">el-icon-s-marketing</span></td>
        <td><i class="el-icon-s-flag"></i><br /><span class="text">el-icon-s-flag</span></td>
        <td><i class="el-icon-s-comment"></i><br /><span class="text">el-icon-s-comment</span></td>
        <td><i class="el-icon-s-finance"></i><br /><span class="text">el-icon-s-finance</span></td>
        <td><i class="el-icon-s-claim"></i><br /><span class="text">el-icon-s-claim</span></td>
        <td><i class="el-icon-s-custom"></i><br /><span class="text">el-icon-s-custom</span></td>
        <td><i class="el-icon-s-opportunity"></i><br /><span class="text">el-icon-s-opportunity</span></td>
        <td><i class="el-icon-s-data"></i><br /><span class="text">el-icon-s-data</span></td>
        <td><i class="el-icon-s-check"></i><br /><span class="text">el-icon-s-check</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-s-grid"></i><br /><span class="text">el-icon-s-grid</span></td>
        <td><i class="el-icon-menu"></i><br /><span class="text">el-icon-menu</span></td>
        <td><i class="el-icon-share"></i><br /><span class="text">el-icon-share</span></td>
        <td><i class="el-icon-d-caret"></i><br /><span class="text">el-icon-d-caret</span></td>
        <td><i class="el-icon-caret-left"></i><br /><span class="text">el-icon-caret-left</span></td>
        <td><i class="el-icon-caret-right"></i><br /><span class="text">el-icon-caret-right</span></td>
        <td><i class="el-icon-caret-bottom"></i><br /><span class="text">el-icon-caret-bottom</span></td>
        <td><i class="el-icon-caret-top"></i><br /><span class="text">el-icon-caret-top</span></td>
        <td><i class="el-icon-bottom-left"></i><br /><span class="text">el-icon-bottom-left</span></td>
        <td><i class="el-icon-bottom-right"></i><br /><span class="text">el-icon-bottom-right</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-back"></i><br /><span class="text">el-icon-back</span></td>
        <td><i class="el-icon-right"></i><br /><span class="text">el-icon-right</span></td>
        <td><i class="el-icon-bottom"></i><br /><span class="text">el-icon-bottom</span></td>
        <td><i class="el-icon-top"></i><br /><span class="text">el-icon-top</span></td>
        <td><i class="el-icon-top-left"></i><br /><span class="text">el-icon-top-left</span></td>
        <td><i class="el-icon-top-right"></i><br /><span class="text">el-icon-top-right</span></td>
        <td><i class="el-icon-arrow-left"></i><br /><span class="text">el-icon-arrow-left</span></td>
        <td><i class="el-icon-arrow-right"></i><br /><span class="text">el-icon-arrow-right</span></td>
        <td><i class="el-icon-arrow-down"></i><br /><span class="text">el-icon-arrow-down</span></td>
        <td><i class="el-icon-arrow-up"></i><br /><span class="text">el-icon-arrow-up</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-d-arrow-left"></i><br /><span class="text">el-icon-d-arrow-left</span></td>
        <td><i class="el-icon-d-arrow-right"></i><br /><span class="text">el-icon-d-arrow-right</span></td>
        <td><i class="el-icon-video-pause"></i><br /><span class="text">el-icon-video-pause</span></td>
        <td><i class="el-icon-video-play"></i><br /><span class="text">el-icon-video-play</span></td>
        <td><i class="el-icon-refresh"></i><br /><span class="text">el-icon-refresh</span></td>
        <td><i class="el-icon-refresh-right"></i><br /><span class="text">el-icon-refresh-right</span></td>
        <td><i class="el-icon-refresh-left"></i><br /><span class="text">el-icon-refresh-left</span></td>
        <td><i class="el-icon-finished"></i><br /><span class="text">el-icon-finished</span></td>
        <td><i class="el-icon-sort"></i><br /><span class="text">el-icon-sort</span></td>
        <td><i class="el-icon-sort-up"></i><br /><span class="text">el-icon-sort-up</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-sort-down"></i><br /><span class="text">el-icon-sort-down</span></td>
        <td><i class="el-icon-rank"></i><br /><span class="text">el-icon-rank</span></td>
        <td><i class="el-icon-loading"></i><br /><span class="text">el-icon-loading</span></td>
        <td><i class="el-icon-view"></i><br /><span class="text">el-icon-view</span></td>
        <td><i class="el-icon-c-scale-to-original"></i><br /><span class="text">el-icon-c-scale-to-original</span></td>
        <td><i class="el-icon-date"></i><br /><span class="text">el-icon-date</span></td>
        <td><i class="el-icon-edit"></i><br /><span class="text">el-icon-edit</span></td>
        <td><i class="el-icon-edit-outline"></i><br /><span class="text">el-icon-edit-outline</span></td>
        <td><i class="el-icon-folder"></i><br /><span class="text">el-icon-folder</span></td>
        <td><i class="el-icon-folder-opened"></i><br /><span class="text">el-icon-folder-opened</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-folder-add"></i><br /><span class="text">el-icon-folder-add</span></td>
        <td><i class="el-icon-folder-remove"></i><br /><span class="text">el-icon-folder-remove</span></td>
        <td><i class="el-icon-folder-delete"></i><br /><span class="text">el-icon-folder-delete</span></td>
        <td><i class="el-icon-folder-checked"></i><br /><span class="text">el-icon-folder-checked</span></td>
        <td><i class="el-icon-tickets"></i><br /><span class="text">el-icon-tickets</span></td>
        <td><i class="el-icon-document-remove"></i><br /><span class="text">el-icon-document-remove</span></td>
        <td><i class="el-icon-document-delete"></i><br /><span class="text">el-icon-document-delete</span></td>
        <td><i class="el-icon-document-copy"></i><br /><span class="text">el-icon-document-copy</span></td>
        <td><i class="el-icon-document-checked"></i><br /><span class="text">el-icon-document-checked</span></td>
        <td><i class="el-icon-document"></i><br /><span class="text">el-icon-document</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-document-add"></i><br /><span class="text">el-icon-document-add</span></td>
        <td><i class="el-icon-printer"></i><br /><span class="text">el-icon-printer</span></td>
        <td><i class="el-icon-paperclip"></i><br /><span class="text">el-icon-paperclip</span></td>
        <td><i class="el-icon-takeaway-box"></i><br /><span class="text">el-icon-takeaway-box</span></td>
        <td><i class="el-icon-search"></i><br /><span class="text">el-icon-search</span></td>
        <td><i class="el-icon-monitor"></i><br /><span class="text">el-icon-monitor</span></td>
        <td><i class="el-icon-attract"></i><br /><span class="text">el-icon-attract</span></td>
        <td><i class="el-icon-mobile"></i><br /><span class="text">el-icon-mobile</span></td>
        <td><i class="el-icon-scissors"></i><br /><span class="text">el-icon-scissors</span></td>
        <td><i class="el-icon-umbrella"></i><br /><span class="text">el-icon-umbrella</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-headset"></i><br /><span class="text">el-icon-headset</span></td>
        <td><i class="el-icon-brush"></i><br /><span class="text">el-icon-brush</span></td>
        <td><i class="el-icon-mouse"></i><br /><span class="text">el-icon-mouse</span></td>
        <td><i class="el-icon-coordinate"></i><br /><span class="text">el-icon-coordinate</span></td>
        <td><i class="el-icon-magic-stick"></i><br /><span class="text">el-icon-magic-stick</span></td>
        <td><i class="el-icon-reading"></i><br /><span class="text">el-icon-reading</span></td>
        <td><i class="el-icon-data-line"></i><br /><span class="text">el-icon-data-line</span></td>
        <td><i class="el-icon-data-board"></i><br /><span class="text">el-icon-data-board</span></td>
        <td><i class="el-icon-pie-chart"></i><br /><span class="text">el-icon-pie-chart</span></td>
        <td><i class="el-icon-data-analysis"></i><br /><span class="text">el-icon-data-analysis</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-collection-tag"></i><br /><span class="text">el-icon-collection-tag</span></td>
        <td><i class="el-icon-film"></i><br /><span class="text">el-icon-film</span></td>
        <td><i class="el-icon-suitcase"></i><br /><span class="text">el-icon-suitcase</span></td>
        <td><i class="el-icon-suitcase-1"></i><br /><span class="text">el-icon-suitcase-1</span></td>
        <td><i class="el-icon-receiving"></i><br /><span class="text">el-icon-receiving</span></td>
        <td><i class="el-icon-collection"></i><br /><span class="text">el-icon-collection</span></td>
        <td><i class="el-icon-files"></i><br /><span class="text">el-icon-files</span></td>
        <td><i class="el-icon-notebook-1"></i><br /><span class="text">el-icon-notebook-1</span></td>
        <td><i class="el-icon-notebook-2"></i><br /><span class="text">el-icon-notebook-2</span></td>
        <td><i class="el-icon-toilet-paper"></i><br /><span class="text">el-icon-toilet-paper</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-office-building"></i><br /><span class="text">el-icon-office-building</span></td>
        <td><i class="el-icon-school"></i><br /><span class="text">el-icon-school</span></td>
        <td><i class="el-icon-table-lamp"></i><br /><span class="text">el-icon-table-lamp</span></td>
        <td><i class="el-icon-house"></i><br /><span class="text">el-icon-house</span></td>
        <td><i class="el-icon-no-smoking"></i><br /><span class="text">el-icon-no-smoking</span></td>
        <td><i class="el-icon-smoking"></i><br /><span class="text">el-icon-smoking</span></td>
        <td><i class="el-icon-shopping-cart-full"></i><br /><span class="text">el-icon-shopping-cart-full</span></td>
        <td><i class="el-icon-shopping-cart-1"></i><br /><span class="text">el-icon-shopping-cart-1</span></td>
        <td><i class="el-icon-shopping-cart-2"></i><br /><span class="text">el-icon-shopping-cart-2</span></td>
        <td><i class="el-icon-shopping-bag-1"></i><br /><span class="text">el-icon-shopping-bag-1</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-shopping-bag-2"></i><br /><span class="text">el-icon-shopping-bag-2</span></td>
        <td><i class="el-icon-sold-out"></i><br /><span class="text">el-icon-sold-out</span></td>
        <td><i class="el-icon-sell"></i><br /><span class="text">el-icon-sell</span></td>
        <td><i class="el-icon-present"></i><br /><span class="text">el-icon-present</span></td>
        <td><i class="el-icon-box"></i><br /><span class="text">el-icon-box</span></td>
        <td><i class="el-icon-bank-card"></i><br /><span class="text">el-icon-bank-card</span></td>
        <td><i class="el-icon-money"></i><br /><span class="text">el-icon-money</span></td>
        <td><i class="el-icon-coin"></i><br /><span class="text">el-icon-coin</span></td>
        <td><i class="el-icon-wallet"></i><br /><span class="text">el-icon-wallet</span></td>
        <td><i class="el-icon-discount"></i><br /><span class="text">el-icon-discount</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-price-tag"></i><br /><span class="text">el-icon-price-tag</span></td>
        <td><i class="el-icon-news"></i><br /><span class="text">el-icon-news</span></td>
        <td><i class="el-icon-guide"></i><br /><span class="text">el-icon-guide</span></td>
        <td><i class="el-icon-male"></i><br /><span class="text">el-icon-male</span></td>
        <td><i class="el-icon-female"></i><br /><span class="text">el-icon-female</span></td>
        <td><i class="el-icon-thumb"></i><br /><span class="text">el-icon-thumb</span></td>
        <td><i class="el-icon-cpu"></i><br /><span class="text">el-icon-cpu</span></td>
        <td><i class="el-icon-link"></i><br /><span class="text">el-icon-link</span></td>
        <td><i class="el-icon-connection"></i><br /><span class="text">el-icon-connection</span></td>
        <td><i class="el-icon-open"></i><br /><span class="text">el-icon-open</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-turn-off"></i><br /><span class="text">el-icon-turn-off</span></td>
        <td><i class="el-icon-set-up"></i><br /><span class="text">el-icon-set-up</span></td>
        <td><i class="el-icon-chat-round"></i><br /><span class="text">el-icon-chat-round</span></td>
        <td><i class="el-icon-chat-line-round"></i><br /><span class="text">el-icon-chat-line-round</span></td>
        <td><i class="el-icon-chat-square"></i><br /><span class="text">el-icon-chat-square</span></td>
        <td><i class="el-icon-chat-dot-round"></i><br /><span class="text">el-icon-chat-dot-round</span></td>
        <td><i class="el-icon-chat-dot-square"></i><br /><span class="text">el-icon-chat-dot-square</span></td>
        <td><i class="el-icon-chat-line-square"></i><br /><span class="text">el-icon-chat-line-square</span></td>
        <td><i class="el-icon-message"></i><br /><span class="text">el-icon-message</span></td>
        <td><i class="el-icon-postcard"></i><br /><span class="text">el-icon-postcard</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-position"></i><br /><span class="text">el-icon-position</span></td>
        <td><i class="el-icon-turn-off-microphone"></i><br /><span class="text">el-icon-turn-off-microphone</span></td>
        <td><i class="el-icon-microphone"></i><br /><span class="text">el-icon-microphone</span></td>
        <td><i class="el-icon-close-notification"></i><br /><span class="text">el-icon-close-notification</span></td>
        <td><i class="el-icon-bangzhu"></i><br /><span class="text">el-icon-bangzhu</span></td>
        <td><i class="el-icon-time"></i><br /><span class="text">el-icon-time</span></td>
        <td><i class="el-icon-odometer"></i><br /><span class="text">el-icon-odometer</span></td>
        <td><i class="el-icon-crop"></i><br /><span class="text">el-icon-crop</span></td>
        <td><i class="el-icon-aim"></i><br /><span class="text">el-icon-aim</span></td>
        <td><i class="el-icon-switch-button"></i><br /><span class="text">el-icon-switch-button</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-full-screen"></i><br /><span class="text">el-icon-full-screen</span></td>
        <td><i class="el-icon-copy-document"></i><br /><span class="text">el-icon-copy-document</span></td>
        <td><i class="el-icon-mic"></i><br /><span class="text">el-icon-mic</span></td>
        <td><i class="el-icon-stopwatch"></i><br /><span class="text">el-icon-stopwatch</span></td>
        <td><i class="el-icon-medal-1"></i><br /><span class="text">el-icon-medal-1</span></td>
        <td><i class="el-icon-medal"></i><br /><span class="text">el-icon-medal</span></td>
        <td><i class="el-icon-trophy"></i><br /><span class="text">el-icon-trophy</span></td>
        <td><i class="el-icon-trophy-1"></i><br /><span class="text">el-icon-trophy-1</span></td>
        <td><i class="el-icon-first-aid-kit"></i><br /><span class="text">el-icon-first-aid-kit</span></td>
        <td><i class="el-icon-discover"></i><br /><span class="text">el-icon-discover</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-place"></i><br /><span class="text">el-icon-place</span></td>
        <td><i class="el-icon-location"></i><br /><span class="text">el-icon-location</span></td>
        <td><i class="el-icon-location-outline"></i><br /><span class="text">el-icon-location-outline</span></td>
        <td><i class="el-icon-location-information"></i><br /><span class="text">el-icon-location-information</span></td>
        <td><i class="el-icon-add-location"></i><br /><span class="text">el-icon-add-location</span></td>
        <td><i class="el-icon-delete-location"></i><br /><span class="text">el-icon-delete-location</span></td>
        <td><i class="el-icon-map-location"></i><br /><span class="text">el-icon-map-location</span></td>
        <td><i class="el-icon-alarm-clock"></i><br /><span class="text">el-icon-alarm-clock</span></td>
        <td><i class="el-icon-timer"></i><br /><span class="text">el-icon-timer</span></td>
        <td><i class="el-icon-watch-1"></i><br /><span class="text">el-icon-watch-1</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-watch"></i><br /><span class="text">el-icon-watch</span></td>
        <td><i class="el-icon-lock"></i><br /><span class="text">el-icon-lock</span></td>
        <td><i class="el-icon-unlock"></i><br /><span class="text">el-icon-unlock</span></td>
        <td><i class="el-icon-key"></i><br /><span class="text">el-icon-key</span></td>
        <td><i class="el-icon-service"></i><br /><span class="text">el-icon-service</span></td>
        <td><i class="el-icon-mobile-phone"></i><br /><span class="text">el-icon-mobile-phone</span></td>
        <td><i class="el-icon-bicycle"></i><br /><span class="text">el-icon-bicycle</span></td>
        <td><i class="el-icon-truck"></i><br /><span class="text">el-icon-truck</span></td>
        <td><i class="el-icon-ship"></i><br /><span class="text">el-icon-ship</span></td>
        <td><i class="el-icon-basketball"></i><br /><span class="text">el-icon-basketball</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-football"></i><br /><span class="text">el-icon-football</span></td>
        <td><i class="el-icon-soccer"></i><br /><span class="text">el-icon-soccer</span></td>
        <td><i class="el-icon-baseball"></i><br /><span class="text">el-icon-baseball</span></td>
        <td><i class="el-icon-wind-power"></i><br /><span class="text">el-icon-wind-power</span></td>
        <td><i class="el-icon-light-rain"></i><br /><span class="text">el-icon-light-rain</span></td>
        <td><i class="el-icon-lightning"></i><br /><span class="text">el-icon-lightning</span></td>
        <td><i class="el-icon-heavy-rain"></i><br /><span class="text">el-icon-heavy-rain</span></td>
        <td><i class="el-icon-sunrise"></i><br /><span class="text">el-icon-sunrise</span></td>
        <td><i class="el-icon-sunrise-1"></i><br /><span class="text">el-icon-sunrise-1</span></td>
        <td><i class="el-icon-sunset"></i><br /><span class="text">el-icon-sunset</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-sunny"></i><br /><span class="text">el-icon-sunny</span></td>
        <td><i class="el-icon-cloudy"></i><br /><span class="text">el-icon-cloudy</span></td>
        <td><i class="el-icon-partly-cloudy"></i><br /><span class="text">el-icon-partly-cloudy</span></td>
        <td><i class="el-icon-cloudy-and-sunny"></i><br /><span class="text">el-icon-cloudy-and-sunny</span></td>
        <td><i class="el-icon-moon"></i><br /><span class="text">el-icon-moon</span></td>
        <td><i class="el-icon-moon-night"></i><br /><span class="text">el-icon-moon-night</span></td>
        <td><i class="el-icon-dish"></i><br /><span class="text">el-icon-dish</span></td>
        <td><i class="el-icon-dish-1"></i><br /><span class="text">el-icon-dish-1</span></td>
        <td><i class="el-icon-food"></i><br /><span class="text">el-icon-food</span></td>
        <td><i class="el-icon-chicken"></i><br /><span class="text">el-icon-chicken</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-fork-spoon"></i><br /><span class="text">el-icon-fork-spoon</span></td>
        <td><i class="el-icon-knife-fork"></i><br /><span class="text">el-icon-knife-fork</span></td>
        <td><i class="el-icon-burger"></i><br /><span class="text">el-icon-burger</span></td>
        <td><i class="el-icon-tableware"></i><br /><span class="text">el-icon-tableware</span></td>
        <td><i class="el-icon-sugar"></i><br /><span class="text">el-icon-sugar</span></td>
        <td><i class="el-icon-dessert"></i><br /><span class="text">el-icon-dessert</span></td>
        <td><i class="el-icon-ice-cream"></i><br /><span class="text">el-icon-ice-cream</span></td>
        <td><i class="el-icon-hot-water"></i><br /><span class="text">el-icon-hot-water</span></td>
        <td><i class="el-icon-water-cup"></i><br /><span class="text">el-icon-water-cup</span></td>
        <td><i class="el-icon-coffee-cup"></i><br /><span class="text">el-icon-coffee-cup</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-cold-drink"></i><br /><span class="text">el-icon-cold-drink</span></td>
        <td><i class="el-icon-goblet"></i><br /><span class="text">el-icon-goblet</span></td>
        <td><i class="el-icon-goblet-full"></i><br /><span class="text">el-icon-goblet-full</span></td>
        <td><i class="el-icon-goblet-square"></i><br /><span class="text">el-icon-goblet-square</span></td>
        <td><i class="el-icon-goblet-square-full"></i><br /><span class="text">el-icon-goblet-square-full</span></td>
        <td><i class="el-icon-refrigerator"></i><br /><span class="text">el-icon-refrigerator</span></td>
        <td><i class="el-icon-grape"></i><br /><span class="text">el-icon-grape</span></td>
        <td><i class="el-icon-watermelon"></i><br /><span class="text">el-icon-watermelon</span></td>
        <td><i class="el-icon-cherry"></i><br /><span class="text">el-icon-cherry</span></td>
        <td><i class="el-icon-apple"></i><br /><span class="text">el-icon-apple</span></td>
      </tr>
      <tr>
        <td><i class="el-icon-pear"></i><br /><span class="text">el-icon-pear</span></td>
        <td><i class="el-icon-orange"></i><br /><span class="text">el-icon-orange</span></td>
        <td><i class="el-icon-coffee"></i><br /><span class="text">el-icon-coffee</span></td>
        <td><i class="el-icon-ice-tea"></i><br /><span class="text">el-icon-ice-tea</span></td>
        <td><i class="el-icon-ice-drink"></i><br /><span class="text">el-icon-ice-drink</span></td>
        <td><i class="el-icon-milk-tea"></i><br /><span class="text">el-icon-milk-tea</span></td>
        <td><i class="el-icon-potato-strips"></i><br /><span class="text">el-icon-potato-strips</span></td>
        <td><i class="el-icon-lollipop"></i><br /><span class="text">el-icon-lollipop</span></td>
        <td><i class="el-icon-ice-cream-square"></i><br /><span class="text">el-icon-ice-cream-square</span></td>
        <td><i class="el-icon-ice-cream-round"></i><br /><span class="text">el-icon-ice-cream-round</span></td>
      </tr>
    </table>
  </div>
</template>

<style>
  * {
    padding: 0;
    margin: 0;
  }
  #app {
    width: 90%;
    margin: 0 auto;
  }
  table {
    border-collapse: collapse;
  }
  table, td {
    border: 1px solid black;
  }
  td {
    width: 190px;
    height: 120px;
    font-size: 32px;
    text-align:center;
  }
  .text {
    font-size: 12px;
  }
</style>

2.3. 运行项目

自由与束缚JavaJavaScript
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-elementUI icon-font
MircoO的博客
05-31 912
【代码】el-elementUI icon-font。
element 如何使用自定义icon图标
HD243608836的博客
07-03 1182
写项目时，发现 element 里的图标没有我需要的图标，两种情况：解决: 修改Element UI自带的小图标，替换成自己的首先找到那个自带的图标class，然后代码如下.is-active .menu_src { filter: drop-shadow(1000px 0 0 #fff); // 颜色写你需要的颜色 transform: translate(-1000px);} 效果： 阿里巴巴图标矢量库 : https://www.iconfont.cn/collections/ind
Element el-icon 图标组件详解
程序员大阳
01-27 5万+
1. 背景 使用图标可以使我们的系统界面更加的炫酷美妙，Element也提供了一些常用的图标可以直接拿来使用。 2. 使用方式 第1种方式通过class样式使用，如下即显示了一个搜索图标。注意图标是以el-icon-开头的，后面的单词表示图标的含义。 <i class="el-icon-search"></i> 此时同样可以将图标放入按钮中。 <el-button type="primary"><i class="el-icon-search">&
[vue]Vue Element使用第三方icon图标教程详解
最新发布
lingrer的博客
07-31 386
将以下代码加进去，注意： el-icon-third 是你之前设置的icon前缀，第二个 el-icon-third前边有空格的。前缀注意，不要跟element-ui自带的icon(前缀为：el-icon)重名了。在src下的assets下新建一个icon文件夹，将下载的所有文件都复制粘贴。解压后你会得到这些文件，打开iconfont.css。选择 Font class 下载至本地。复制代码可获得一个class类名。在购物车当中选择添加至项目。在main.js当中引入。
Element-Ui组件（二）Icon 图标
热门推荐
究极死胖兽的博客
06-03 24万+
Element-Ui组件（二）图标应用 本文参考Element官方文档： http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰富的图标库，主要有以下2种用法： 设置类名el-icon-xxx，通常使用i元素 在Element部分组件中设置icon属性 页面效果 以下是通过上述两种用法制作的简单导航工具条： 示例代码 &l...
【Element-ui】Icon 图标与Button 按钮
m0_62599305的博客
12-02 2万+
在前端开发中，界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开各种组件的运用。本文将聚焦于Element-ui中的两个常用组件——Icon图标和Button按钮，分别介绍它们的基本用法和一些实用技巧。Icon图标为界面添加了更多的元素，而Button按钮则是用户与页面进行交互的重要媒介，通过深入理解它们，我们可以更好地打造出美观、实用的前端界面。在本文中，我们深入了解了Element-ui中的Icon图标和Button按钮的基本用法和实用技巧。
vue3 elementplus el-Icon 动态渲染 点击切换icon图标组件
qq_45864922的博客
01-08 2942
vue3 elementplus Icon 动态渲染切换icon组件
ICON.rar_icon_icon图标_icon提取_图标提取_提取图标
09-23
"ICON.rar_icon_icon图标_icon提取_图标提取_提取图标"这个标题和描述涉及到了一个与图标处理相关的工具，即"ICON图标提取工具"。这个工具主要用于从.exe和.dll文件中提取图标资源。 首先，我们需要理解.exe和.dll...
icon.zip_gentle8eq_icon_icon图标
09-23
【标题】"icon.zip_gentle8eq_icon_icon图标" 提供的是一个图标集合，主要包含了一系列与计算机程序、操作系统界面相关的图标资源。这个压缩包的名称“gentle8eq”可能是指图标设计的风格或者特定系列，而“icon_...
GetIconFromFile.rar_VC 图标_icon_获取 文件 图标_获取图标_获取文件图标
09-24
标题"GetIconFromFile.rar_VC 图标_icon_获取 文件 图标_获取图标_获取文件图标"指的是一个示例代码或库，用于在Windows操作系统中实现这一功能。描述中的“从文件里获取图标,在vc++6.0下编译通过”证实了这是一个在...
Icon_Class.rar_icon_icon-class_半透明_图标class
09-21
标题中的“Icon_Class.rar_icon_icon-class_半透明_图标class”暗示了这是一个关于在编程中处理图标（icon）的资源，特别是与Windows操作系统中的图标文件（.ico）格式相关的内容，且强调了如何实现半透明效果。...
EasyUI_Icon_图标扩展样式（1775个）
07-02
它提供了丰富的组件，如表格、下拉菜单、对话框、按钮等，并且内置了一些基本的图标（Icon）。然而，正如标题和描述中提到的，EasyUI 自带的图标可能在数量和美观度上不能满足所有开发者的需要。为了丰富界面设计，...
【已解决】vue3+ts使用Element-Plus icon图标不显示|element plus 使用 icon 图标教程
肥晨开发的学习之路
03-25 8163
Element Plus 的图标组件也支持自定义图标。你可以通过 el-icon 组件的 name 属性来指定一个自定义图标的类名，并在你的 CSS 中定义这个类名对应的图标样式。/* 或者使用字体图标 *//* 其他样式 */确保你的自定义图标样式正确无误，并且图标的路径也是正确的。如果你使用的是字体图标，你可能需要设置 font-family 和其他相关属性。您好，我是肥晨。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。
element icon图标用法
otter_9527的博客
05-10 1941
element icon图标用法 2.直接使用 SVG 图标。3.下载成PNG使用。
element-icon在菜单管理中下拉设置菜单图标
qq_44641517的博客
03-04 3390
<el-form-item label="图标" prop="icon" label-width="100px" v-if="editForm.type!=2"> <el-select placeholder="请选择" v-model="editForm.icon"> <template v-for=" item in iconList"> ...
element中icon字体图标的使用
m0_63040701的博客
07-15 1555
size：图标的大小【默认继承字体大小】color：图标颜色【默认继承颜色】
element 中使用自定义图片icon图标
qq_43235503的博客
04-04 3465
element 中使用自定义图片icon图标
Vue+ElementUI实现点击按钮刷新页面
莫绝岚的小屋
09-09 3844
js部分代码：刷新页面主要用到this.$router.go(0)或window.location.reload()vue中ElementUI刷新页面代码。
vue3 动态加载el-icon图标
周家大小姐
05-28 9510
安装插件 cnpm install @element-plus/icons main.js引入 import { createApp } from 'vue' import App from './App.vue' import router from './router/index' import { store, key } from './store/index' import ElementPlus from 'element-plus' import 'element-plus/dis
<el-icon><Plus /></el-icon>与<Icon icon=“ep:plus”/>的区别
05-29
<el-icon>和<Icon icon="ep:plus">都是用来展示图标的组件。它们的区别在于，<el-icon>是Element UI框架提供的组件，而<Icon icon="ep:plus">是使用了第三方的图标库eicon-font来提供图标的。此外，两者的使用方式也略有不同，<el-icon>使用的是Element UI自带的图标库，需要在代码中引入相应的css文件和字体文件，而<Icon icon="ep:plus">则需要在代码中引入eicon-font的css文件和字体文件。同时，两者的图标库和图标数量也有所不同。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值