Semantic UI is a component-rich UI framework that helps in building beautiful web experiences. In this article, we will be taking a look at the Chess Icons that come with Semantic UI. There are 9 chess icons that can be used to represent things related to chess.
Semantic-UI Icon Set Chess Classes:
- chess: This class shows an icon containing a king and a rook.
- chess bishop: These classes are used to show the bishop icon.
- chess board: These classes are used to show the chessboard icon.
- chess king: These classes are used to show the king icon.
- chess knight: These classes are used to show the knight icon.
- chess pawn: These classes are used to show the pawn icon.
- chess queen: These classes are used to show the queen icon.
- chess rook: These classes are used to show the rook icon.
- square full: These classes are used to show a single chess square icon.
Syntax:
<i class="icon Chess-Icon-Class/Classes"> </i>
Example: The below example shows the use of all 9 icons listed above.
HTML
<!DOCTYPE html> < html >
< head >
< title >Semantic UI - Icon Set Chess</ title >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< style >
.ui.container {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</ style >
</ head >
< body >
< div class = "ui container" >
< div >
< h1 style = "color: green;" >GeeksforGeeks</ h1 >
< h3 >Semantic UI - Icon Set Chess</ h3 >
</ div >
< div class = "ui grid" >
< div class = "three wide column" >
< i class = "icon big chess" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon big chess bishop" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon big chess board" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon big chess king" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon big chess knight" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon big chess pawn" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon big chess queen" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon big chess rook" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon big square full" ></ i >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example2: The below example shows variations of Chess icons with different sizes and colors.
HTML
<!DOCTYPE html> < html >
< head >
< title >Semantic UI - Icon Set Chess</ title >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< style >
.ui.container {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</ style >
</ head >
< body >
< div class = "ui container" >
< div >
< h1 style = "color: green;" >GeeksforGeeks</ h1 >
< h3 >Semantic UI - Icon Set Chess</ h3 >
</ div >
< div class = "ui grid" >
< div class = "three wide column" >
< i class = "icon pink small chess" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon teal small chess bishop" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon grey chess board" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon blue chess king" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon red large chess knight" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon yellow large chess pawn" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon green big chess queen" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon pink huge chess rook" ></ i >
</ div >
< div class = "three wide column" >
< i class = "icon violet big square full" ></ i >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/elements/icon.html#chess