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.
Semantic UI provides the users with various different icons that can be used for different purposes with a beautiful user interface. The icons add more beauty to the website than the textual representation.
In this article, let us see about the icon set of audio and video. Semantic UI provides some most commonly used icon classes for audio and video which were mostly used in video or chat applications.
Semantic UI Icon set audio and video classes:
- audio description: This class is used to show the audio description icon.
- backward: This class is used to show the backward icon.
- circle: This class is used to show the circle icon.
- circle outline: This class is used to show the outline of the circle icon.
- closed captioning: This class is used to show the closed captioning icon.
- closed captioning outline: This class is used to show the outline of the closed captioning icon.
- compress: This class is used to show the compressed icon.
- eject: This class is used to show the eject icon.
- expand: This class is used to show the expand icon.
- expand arrows alternate: This class is used to show the alternative of expanding arrows icon.
- fast backward: This class is used to show the fast backward icon.
- fast forward: This class is used to show the fast forward icon.
- file audio: This class is used to show the file audio icon.
- file audio outline: This class is used to show the outline of the file audio icon.
- file video: This class is used to show the file video icon.
- file video outline: This class is used to show the outline of the file video icon.
- film: This class is used to show the film icon.
- forward: This class is used to show the forward icon.
- headphones: This class is used to show the headphones icon.
- microphone: This class is used to show the microphone icon.
- microphone slash: This class is used to show the microphone slash icon.
- music: This class is used to show the music icon.
- pause: This class is used to show the pause icon.
- pause circle: This class is used to show the pause circle icon.
- pause circle outline: This class is used to show the outline of the pause circle icon.
- phone volume: This class is used to show the phone volume icon.
- play: This class is used to show the play icon.
- play circle: This class is used to show the play circle icon.
- play circle outline: This class is used to show the outline of the play circle icon.
- podcast: This class is used to show the podcast icon.
- random: This class is used to show the random icon.
- redo: This class is used to show the redo icon.
- redo alternate: This class is used to show the alternate for redo icon.
- rss: This class is used to show the rss icon.
- rss square: This class is used to show the rss square icon.
- step backward: This class is used to show the step backward icon.
- step forward: This class is used to show the step forward icon.
- stop: This class is used to show the stop icon.
- stop circle: This class is used to show the stop circle icon.
- stop circle outline: This class is used to show the outline of the stop circle icon.
- sync: This class is used to show the sync icon.
- sync alternate: This class is used to show the alternate of sync icon.
- undo: This class is used to show the undo icon.
- undo alternate: This class is used to show the alternate of undo icon.
- video: This class is used to show the video icon.
- volume down: This class is used to show the volume down icon.
- volume off: This class is used to show the volume off icon.
- volume up: This class is used to show the volume up icon.
Syntax:
<i class="icon....audio description "></i>
Note: The developer can change the class name for the icon selected as the need.
Example 1: This code demonstrates all audio and video icon set classes.
HTML
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong> Semantic-UI Icon Set Audio and Video</strong>
<br/><br/>
<div class="ui container">
<div class="ui grid">
<div class="three wide column">
<i class="icon big audio description "></i>
</div>
<div class="three wide column">
<i class="icon big backward"></i>
</div>
<div class="three wide column">
<i class="icon big circle"></i>
</div>
<div class="three wide column">
<i class="icon big circle outline"></i>
</div>
<div class="three wide column">
<i class="icon big closed captioning"></i>
</div>
<div class="three wide column">
<i class="icon big closed captioning outline"></i>
</div>
<div class="three wide column">
<i class="icon big compress"></i>
</div>
<div class="three wide column">
<i class="icon big eject"></i>
</div>
<div class="three wide column">
<i class="icon big expand "></i>
</div>
<div class="three wide column">
<i class="icon big expand arrows alternate"></i>
</div>
<div class="three wide column">
<i class="icon big fast backward"></i>
</div>
<div class="three wide column">
<i class="icon big fast forward"></i>
</div>
<div class="three wide column">
<i class="icon big file audio"></i>
</div>
<div class="three wide column">
<i class="icon big file audio outline "></i>
</div>
<div class="three wide column">
<i class="icon big file video"></i>
</div>
<div class="three wide column">
<i class="icon big file video outline "></i>
</div>
<div class="three wide column">
<i class="icon big film "></i>
</div>
<div class="three wide column">
<i class="icon big forward"></i>
</div>
<div class="three wide column">
<i class="icon big headphones"></i>
</div>
<div class="three wide column">
<i class="icon big microphone"></i>
</div>
<div class="three wide column">
<i class="icon big microphone slash"></i>
</div>
<div class="three wide column">
<i class="icon big music"></i>
</div>
<div class="three wide column">
<i class="icon big pause"></i>
</div>
<div class="three wide column">
<i class="icon big pause circle "></i>
</div>
<div class="three wide column">
<i class="icon big pause circle outline"></i>
</div>
<div class="three wide column">
<i class="icon big phone volume"></i>
</div>
<div class="three wide column">
<i class="icon big play"></i>
</div>
<div class="three wide column">
<i class="icon big play circle"></i>
</div>
<div class="three wide column">
<i class="icon big play circle outline"></i>
</div>
<div class="three wide column">
<i class="icon big podcast "></i>
</div>
<div class="three wide column">
<i class="icon big random"></i>
</div>
<div class="three wide column">
<i class="icon big redo"></i>
</div>
<div class="three wide column">
<i class="icon big redo alternate"></i>
</div>
<div class="three wide column">
<i class="icon big rss"></i>
</div>
<div class="three wide column">
<i class="icon big rss square"></i>
</div>
<div class="three wide column">
<i class="icon big step backward"></i>
</div>
<div class="three wide column">
<i class="icon big step forward"></i>
</div>
<div class="three wide column">
<i class="icon big stop"></i>
</div>
<div class="three wide column">
<i class="icon big stop circle"></i>
</div>
<div class="three wide column">
<i class="icon big stop circle outline"></i>
</div>
<div class="three wide column">
<i class="icon big sync"></i>
</div>
<div class="three wide column">
<i class="icon big sync"></i>
</div>
<div class="three wide column">
<i class="icon big sync"></i>
</div>
<div class="three wide column">
<i class="icon big sync alternate "></i>
</div>
<div class="three wide column">
<i class="icon big undo"></i>
</div>
<div class="three wide column">
<i class="icon big undo alternate"></i>
</div>
<div class="three wide column">
<i class="icon big video "></i>
</div>
<div class="three wide column">
<i class="icon big volume down"></i>
</div>
<div class="three wide column">
<i class="icon big volume off "></i>
</div>
<div class="three wide column">
<i class="icon big volume up "></i>
</div>
</div>
</div>
</center>
</body>
</html>
|
Output:
Example 2: This code demonstrates an example of audio and video icon set classes.
HTML
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong> Semantic-UI Icon Set Audio and Video </strong>
<br/><br/>
<div class="ui container">
<div class="ui icon buttons">
<button class="ui button">
<i class="blue headphones large icon"></i>
</button>
<button class="ui button">
<i class="blue microphone slash large icon"></i>
</button>
<button class="ui button">
<i class="blue volume up large icon"></i>
</button>
<button class="ui button">
<i class="blue video large icon"></i>
</button>
</div>
</div>
</center>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/icon.html#audio–video