mirror of https://github.com/ElemeFE/element
2.7 KiB
2.7 KiB
Icon
Element provides a set of common icons.
Basic usage
Just assign the class name to el-icon-iconName.
:::demo
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="search">Search</el-button>
:::
Icons
- {{'el-icon-' + name}}
Third-party icons
Some of Element's components has an icon attribute, e.g. Input. If you want to use a third-party icon in the icon attribute, here's what you need to do:
1. Modify the class name prefix of the third-party library
Please read third-party icon library documentation on how to do it. For example, if you're using iconfont.cn, you can find prefix editor in the "Edit Project" dialog. If you're using Font Awesome, you can refer to this demo.
2. Add some CSS:
[class^="el-icon-my"], [class*=" el-icon-my"] {
font-family:"your-font-family" !important;
/* The following is based on original CSS rules of third-party library */
font-size: inherit;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Now you can use them as you do with Element built-in icons. For example, in el-input:
<el-input icon="my-xxx" />