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 Payments and Shopping.
Semantic UI provides some most commonly used icon classes for Payments and Shopping for e-commerce or ed-tech apps and here are the classes.
Semantic UI Icon set Payments and Shopping classes:
- bell: This class is used to show the bell icon.
- bell outline: This class is used to show the outline of the bell icon.
- bookmark: This class is used to show the bookmark icon
- bookmark outline: This class is used to show the outline of the bookmark icon
- bullhorn: This class is used to show the bullhorn icon.
- camera: This class is used to show the camera icon.
- camera retro: This class is used to show the retro camera icon.
- cart arrow down: This class is used to show the cart arrow down icon.
- cart plus: This class is used to show the cart plus icon.
- credit card: This class is used to show the credit card icon.
- credit card outline: This class is used to show the outline of the credit card icon.
- gem: This class is used to show the gem icon
- gem outline: This class is used to show the outline of the gem icon.
- gift: This class is used to show the gift icon.
- handshake: This class is used to show the handshake icon.
- handshake outline: This class is used to show the outline of the handshake icon.
- heart: This class is used to show the heart icon.
- heart outline: This class is used to show the outline of the heart icon.
- key: This class is used to show the key icon.
- shopping bag: This class is used to show the shopping bag icon.
- shopping basket: This class is used to show the shopping basket icon.
- shopping cart: This class is used to show the shopping cart icon.
- star: This class is used to show the star icon.
- star outline: This class is used to show the outline of the star icon.
- tag: This class is used to show the tag icon.
- tags: This class is used to show the tags icon.
- thumbs down: This class is used to show the thumbs down icon.
- thumbs down outline: This class is used to show the outline of the thumbs down icon.
- thumbs up: This class is used to show the thumbs up icon.
- thumbs up outline: This class is used to show the outline of the thumbs up icon.
- trophy: This class is used to show the trophy icon.
Syntax:
<i class="icon.... shopping-class"></i>
Example 1: This code demonstrates the all shopping and payments icon set classes.
HTML
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Icon Set Payments and Shopping
</strong>
<br />
<br />
<div class=" ui container">
<div class="ui grid">
<div class="three wide column">
<i class="icon big bell"></i>
</div>
<div class="three wide column">
<i class="icon big bell outline"></i>
</div>
<div class="three wide column">
<i class="icon big bookmark"></i>
</div>
<div class="three wide column">
<i class="icon big bookmark outline"></i>
</div>
<div class="three wide column">
<i class="icon big bullhorn"></i>
</div>
<div class="three wide column">
<i class="icon big camera "></i>
</div>
<div class="three wide column">
<i class="icon big camera retro"></i>
</div>
<div class="three wide column">
<i class="icon big cart arrow down"></i>
</div>
<div class="three wide column">
<i class="icon big cart plus "></i>
</div>
<div class="three wide column">
<i class="icon big credit card "></i>
</div>
<div class="three wide column">
<i class="icon big credit card outline"></i>
</div>
<div class="three wide column">
<i class="icon big gem "></i>
</div>
<div class="three wide column">
<i class="icon big gem outline"></i>
</div>
<div class="three wide column">
<i class="icon big gift"></i>
</div>
<div class="three wide column">
<i class="icon big handshake"></i>
</div>
<div class="three wide column">
<i class="icon big handshake outline"></i>
</div>
<div class="three wide column">
<i class="icon big heart"></i>
</div>
<div class="three wide column">
<i class="icon big heart outline"></i>
</div>
<div class="three wide column">
<i class="icon big key"></i>
</div>
<div class="three wide column">
<i class="icon big shopping bag "></i>
</div>
<div class="three wide column">
<i class="icon big shopping basket"></i>
</div>
<div class="three wide column">
<i class="icon big shopping cart"></i>
</div>
<div class="three wide column">
<i class="icon big star "></i>
</div>
<div class="three wide column">
<i class="icon big star outline"></i>
</div>
<div class="three wide column">
<i class="icon big tag"></i>
</div>
<div class="three wide column">
<i class="icon big tags"></i>
</div>
<div class="three wide column">
<i class="icon big thumbs down"></i>
</div>
<div class="three wide column">
<i class="icon big thumbs down outline"></i>
</div>
<div class="three wide column">
<i class="icon big thumbs up"></i>
</div>
<div class="three wide column">
<i class="icon big thumbs up outline"></i>
</div>
<div class="three wide column">
<i class="icon big trophy"></i>
</div>
</div>
</div>
</center>
</body>
</html>
|
Output:
Example 2: This code demonstrates the use of the shopping and payments icon set.
HTML
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong>Semantic UI Icon Set Shopping and Payments</strong>
<br />
<br />
<div class="ui container">
<button class="ui button">
<i class="shopping cart icon"></i>
Shop
</button>
<button class="ui button">
<i class="bullhorn icon"></i>
Notifications
</button>
<button class="ui button">
<i class="bookmark icon"></i>
Bookmark item
</button>
<button class="ui button">
<i class=" heart icon"></i>
Give Feedback
</button>
</div>
</center>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/icon.html#payments–shopping