Open In App

Semantic-UI Button Icon Type

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI Button Type offers us different types of buttons like normal buttons, emphasis buttons, animated buttons. labeled button, icon, labeled icon, basic, and inverted button. In this article, we will learn about the Semantic UI Button Icon Type.

Semantic UI Button Icon Type class is used to create buttons that will contain the icon inside of a button.

Semantic-UI Button Icon Type Class:

  • icon: This class is used to add the button inside of a button.

Syntax:

<button class="ui icon button">
  <i class="..."></i>
</button>

Example 1: In this example, we will use icons on normal buttons.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
          rel="stylesheet" />
    <style>
        .container {
            margin-left: 25px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <strong>Semantic-UI Button Icon Type</strong>
    </center>
    <br><br>
    <div class="container">
        <strong class="ui header red">
            GeeksforGeeks<sub>News letter</sub>:</strong>
        <button class="ui icon green button">Subscribed
            <i class="user icon"></i>
        </button>
        <button class="ui icon button">Notify Me
            <i class="bell icon"></i>
        </button>
    </div>
</body>
  
</html>


Output:

Semantic-UI Button Icon Type

Semantic-UI Button Icon Type

Example 2: In this example, we will use icons on basic buttons.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
          rel="stylesheet" />
    <style>
        .container {
            margin-left: 25px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <strong>Semantic-UI Button Icon Type</strong>
    </center>
    <br><br>
    <div class="container">
        <strong class="ui header red">
            GeeksforGeeks<sub>News letter</sub>:</strong>
        <button class="ui icon green basic button">Subscribed
            <i class="user icon"></i>
        </button>
        <button class="ui icon basic button">Notify Me
            <i class="bell icon"></i>
        </button>
    </div>
</body>
  
</html>


Output:

Semantic-UI Button Icon Type

Semantic-UI Button Icon Type

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



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