[ElementUI component optimization] the use of custom icon icons

Be an adult in the wind and rain, and a child in the sun.

        The front end often uses various charts provided by the UI, and Ali's icon library is recommended. If the UI requirements are not very strict, we can find the desired icon in the icon library by ourselves. Click to download after searching.

        Using the Icon icon component in ElementUI is very easy to use

At the same time, it will also be used in the icon button.


define your own icon

1. Download and save your own icon

2. Writing style (emphasis)

Name the icon el-icon-my-people, and add a style, without scoped, to complete the creation of an icon

<style lang="scss">
//不要定义 scoped
.el-icon-my-people {
  background: url("../../assets/images/order/icon1.png") center no-repeat;
  font-size: 16px;
  background-size: cover;
}
.el-icon-my-people:before {
  content: "替";
  font-size: 16px;
  visibility: hidden;
}
</style>

 3. use

The use of icons is the same as the use of icons in ElementUI. The use of the button can also use the icon name directly.

<i class="el-icon-my-people"></i>
<i class="el-icon-my-fast"></i>
<i class="el-icon-my-sure"></i>

 

Guess you like

Origin blog.csdn.net/Sabrina_cc/article/details/125078026