semantic-ui icons

　　Semantic-ui provides a lot of icons, the most commonly used ones can be found on the official website. It is impossible to remember so many icons, but there are easy ways to remember them.

　　First of all, there is basically no difference between an icon and a button. If there is any, that is, the size of the basic style is different. The button is larger, and of course, it can be set by increasing the size value.

　　There is this neat way to learn semantic icons:

　　1. Icons can only use i tags, not div, span, button tags.

　　2. After the names of the buttons are all lowercase, download the class, and then add an icon.

 

1. Basic icons

<i class="home icon"></i>
<i class="setting icon"></i>
<i class="alarm icon"></i>

　　

 

2. Define the icon size 

　　You can directly add the size value to the icon's class.

<i class="home mini icon"></i>
<i class="setting large icon"></i>
<i class="alarm huge icon"></i>

　　

3. Set the icon color

　　It is no different from the button, you can directly add the color to the class of the icon

<i class="home mini red icon"></i>
<i class="setting large blue icon"></i>
<i class="alarm huge pink icon"></i>

　　

4. Animation button

　　In semantic ui, three button animations are provided, moving left and right, moving up and down, and fading in and out.

　　Because you want to add animation effects, you need to add an animated class to the class

　　Because to animate, some things must be hidden and some things must be displayed, so the class of the displayed content is set to visible content, and the hidden content is set to hidden content.

　　If no animation is specified, the default is to move left and right, then to move up and down and fade in and out is to add a vartical to the outer div or span, and fade

<div class="ui animated button">
	<div class="visible content">家</div>
	<i class="hidden content">
		<i class="home icon"></i>
	</i>
</div>

　　Display effect: slightly

 

　

　　Summarize:

　　In fact, icons and buttons are really no different. The styles that buttons can use can also be used for icons, so I only wrote a description of the styles for icons.