Semantic-UI Icon Set Chess
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:
Semantic-UI Icon Set Chess
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:
Semantic-UI Icon Set Chess
Reference: https://semantic-ui.com/elements/icon.html#chess
Please Login to comment...