Semantic-UI Icon Set Accessibility
Last Updated :
21 Mar, 2022
Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap. It provides the users with various icons that can be used for different purposes with a beautiful user interface. In this article let us see about the Icon set of accessibility. Semantic UI provides some most commonly used icon classes for design which were mostly used in the editors and here are the classes. An icon is a glyph used to represent something else and it can represent accessibility standards.
Semantic-UI Icon Set Accessibility classes:
- American sign language interpreting icon - This class is used to make an American sign language interpreting the icon.
- assistive listening systems icon - This class is used to make an assistive listening systems icon.
- audio description icon - This class is used to make an audio description icon.
- blind icon - This class is used to make a blind icon.
- braille icon - This class is used to make a braille icon.
- closed captioning icon - This class is used to make a closed captioning icon.
- closed captioning outline icon - This class is used to make a closed captioning outline icon.
- deaf icon - This class is used to make a deaf icon.
- low vision icon - This class is used to make a low vision icon.
- phone volume icon - This class is used to make a phone volume icon.
- question circle icon - This class is used to make a question circle icon.
- question circle outline icon - This class is used to make a question circle outline icon.
- sign language icon - This class is used to make a sign language icon.
- tty icon - This class is used to make a tty icon.
- universal access icon - This class is used to make a universal access icon.
- wheelchair icon - This class is used to make a wheelchair icon.
Syntax:
<i class="blind icon"></i>
Note: You can change the class name from the above class list.
Example 1: This code demonstrates all accessibility icon set classes.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Icon Set Accessibility
</strong><br /><br />
<div class=" ui container">
<div class="ui grid">
<div class="three wide column">
<i class="american sign language interpreting icon"></i>
</div>
<div class="three wide column">
<i class="assistive listening systems icon"></i>
</div>
<div class="three wide column">
<i class="audio description icon"></i>
</div>
<div class="three wide column">
<i class="blind icon"></i>
</div>
<div class="three wide column">
<i class="braille icon"></i>
</div>
<div class="three wide column">
<i class="closed captioning icon"></i>
</div>
<div class="three wide column">
<i class="closed captioning outline icon"></i>
</div>
<div class="three wide column">
<i class="deaf icon"></i>
</div>
<div class="three wide column">
<i class="low vision icon"></i>
</div>
<div class="three wide column">
<i class="phone volume icon"></i>
</div>
</div>
</div>
</center>
</body>
</html>
Output :
Example 2: This code demonstrates all accessibility icon set classes.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"/>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong>Semantic UI Icon Set Accessibility </strong>
<br/>
<br/>
<div class="ui container">
<button class="ui button">
<i class="question circle icon"></i>
</button>
<button class="ui button">
<i class="question circle outline icon"></i>
</button>
<button class="ui button">
<i class="sign language icon"></i>
</button>
<button class="ui button">
<i class="tty icon"></i>
</button>
</div>
</center>
</body>
</html>
Output:
Reference: https://semantic-ui.com/elements/icon.html#accessibility
Similar Reads
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: c
3 min read
Semantic-UI Icon Set Design Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like boots
4 min read
Semantic-UI Icon Set Health Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like boots
3 min read
Semantic-UI Icon Set Code Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like boots
4 min read
Semantic-UI Icon Set Editors Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like boots
6 min read
Semantic-UI Icon Set Files Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like boots
6 min read