Skip to content
Related Articles
Open in App
Not now

Related Articles

Semantic-UI Icon Fitted Variation

Improve Article
Save Article
Like Article
  • Last Updated : 13 Feb, 2022
Improve Article
Save Article
Like Article

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 fitted variation is used to display icons in between text without taking extra space. The icons are fitted without any extra space left or right.

Semantic UI Icon fitted variation class:

  • fitted: Add this class to the icon and the icon will take less space.


<i class="like fitted icon">

Example: Below example illustrate the Semantic UI Icon fitted Variation. In this example, we have two texts containing icons, one having fitted class and another without fitted class.


<!DOCTYPE html>
<html lang="en">
        <link href=
            <h1 class="header ui green">
                    Semantic UI Icon Fitted Variation            
        <h3 class="ui dividing header" id="commentsHeader">
        <p> This icon
            <i class="like fitted icon"></i>
            have fitted variation
        <p> This icon
            <i class="like icon"></i>
            does not have fitted variation



My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!