Open In App

Semantic-UI Icon Link Variation

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Icon is a glyph that is used to display something else in place of text to save space and time. Icons are used to help users to navigate around and have the same meaning across all languages and hence many items need not be written in different languages.

Semantic UI Icon link variation helps to format an icon as a link. The link variation adds a hover effect to the icon and changes the mouse pointer as a cursor for links.

Semantic UI Icon Link Variation Classes: 

  • link: On adding this class, we can format an icon as a link that has all features of the link like hover effect and mouse pointer to be as a cursor.

Syntax: Add the link class to make the icon a link as follows.

<i class="link icon">
    ...
</i>

Example: The below example illustrates the Semantic UI Icon link variation. In the following example, the icons are formatted as links by adding the link class.

HTML




<!DOCTYPE html>
<html>
    <head>
        <link href=
            rel="stylesheet"/>
        <script src=
        </script>
        <script src=
        </script>
        <style>
           body
           {
             margin-left:10px;
             margin-right:10px;
           }
        </style>
    </head>
    <body>
        <div class="ui container">
            <center>
                <h1 class="ui header green"
                      GeeksforGeeks 
                 </h1>
                <strong>
                      Semantic UI Icon Link Variation
                  </strong>          
         
                <div class="ui segment">
                    <i class="link cloud huge icon"></i>
                    <i class="link globe huge icon"></i>
                </div>
            </center>
        </div>
    </body>
</html>


Output:            

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



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