Open In App

Semantic-UI Icon Set Chess

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

Semantic-UI Icon Set Chess

Reference: https://semantic-ui.com/elements/icon.html#chess



Last Updated : 24 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads