1. 背景
使用图标可以使我们的系统界面更加的炫酷美妙,Element也提供了一些常用的图标可以直接拿来使用。
2. 使用方式
第1种方式通过class样式使用,如下即显示了一个搜索图标。注意图标是以el-icon-开头的,后面的单词表示图标的含义。
<i class="el-icon-search"></i>
1
此时同样可以将图标放入按钮中。
<el-button type="primary"><i class="el-icon-search"></i>搜索</el-button>
<el-link type="primary"><i class="el-icon-search"></i>搜索</el-link>
第2中方式是可以直接指定组件的icon属性,这种方式下组件的显示会更加标准好看,推荐使用这种方式。
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-link type="primary" icon="el-icon-search">搜索</el-link>
以上代码效果如下:
3. 图标列表
可以从官网查询所有支持的图标:图标列表。