Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic UI icons can be used for representing various things and activities. Semantic UI Icon Logistic Set is a total of 10 icons in the logistics icon set which can be used for representing objects or service activity related to logistics. Icons can represent common logistic activity
Semantic UI Icon Set Logistics Classes:
- box: This class is used to show the box icon.
- boxes: This class is used to show the icons representing a lot of boxes.
- clipboard check: These classes are used to show the checked clipboard icon.
- clipboard list: These classes are used to show the clipboard list icon.
- dolly: This class is used to show the dolly icon.
- dolly flatbed: This class is used to show the flatbed dolly icon.
- pallet: This class is used to show the pallet icon.
- shipping fast: These classes are used to show the fast shipping icon.
- truck: This class is used to show the truck icon.
- warehouse: This class is used to show the warehouse icon.
Syntax:
<i class="icon ... Icon-Set-Logistics-Classes"></i>
Example1: The example below illustrates the use of all 10 icons listed above.
HTML
<!DOCTYPE html> <html>
<head>
<title>Semantic UI - Icon Set Logistics</title>
<!-- Scripts and CSS -->
<link rel="stylesheet"
href=
<style>
.ui.container {
text-align: center;
}
h4 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI - Icon Set Logistics</strong>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon big box"></i>
</div>
<div class="four wide column">
<i class="icon big boxes"></i>
</div>
<div class="four wide column">
<i class="icon big clipboard check"></i>
</div>
<div class="four wide column">
<i class="icon big clipboard list"></i>
</div>
<div class="four wide column">
<i class="icon big dolly"></i>
</div>
<div class="four wide column">
<i class="icon big dolly flatbed"></i>
</div>
<div class="four wide column">
<i class="icon big pallet"></i>
</div>
<div class="four wide column">
<i class="icon big shipping fast"></i>
</div>
<div class="four wide column">
<i class="icon big truck"></i>
</div>
<div class="four wide column">
<i class="icon big warehouse"></i>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Icon Set Logistics
Example 2: The example below shows the use of Logistics Set icons with different colors.
HTML
<!DOCTYPE html> <html>
<head>
<title>Semantic UI - Icon Set Logistics</title>
<!-- Scripts and CSS -->
<link rel="stylesheet" href=
<style>
.ui.container {
text-align: center;
}
h4 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI - Icon Set Logistics</strong>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon red big box"></i>
</div>
<div class="four wide column">
<i class="icon blue big boxes"></i>
</div>
<div class="four wide column">
<i class="icon yellow big clipboard check"></i>
</div>
<div class="four wide column">
<i class="icon green big clipboard list"></i>
</div>
<div class="four wide column">
<i class="icon orange big dolly"></i>
</div>
<div class="four wide column">
<i class="icon pink big dolly flatbed"></i>
</div>
<div class="four wide column">
<i class="icon grey big pallet"></i>
</div>
<div class="four wide column">
<i class="icon teal big shipping fast"></i>
</div>
<div class="four wide column">
<i class="icon violet big truck"></i>
</div>
<div class="four wide column">
<i class="icon big warehouse"></i>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Icon Set Logistics
Example 3: The example below shows the use of logistics set icons with size variation.
HTML
<!DOCTYPE html> <html>
<head>
<title>Semantic UI - Icon Set Logistics</title>
<!-- Scripts and CSS -->
<link rel="stylesheet"
href=
<style>
.ui.container {
text-align: center;
}
h4 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI - Icon Set Logistics</strong>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon small box"></i>
</div>
<div class="four wide column">
<i class="icon small boxes"></i>
</div>
<div class="four wide column">
<i class="icon small clipboard check"></i>
</div>
<div class="four wide column">
<i class="icon large clipboard list"></i>
</div>
<div class="four wide column">
<i class="icon large dolly"></i>
</div>
<div class="four wide column">
<i class="icon dolly flatbed"></i>
</div>
<div class="four wide column">
<i class="icon pallet"></i>
</div>
<div class="four wide column">
<i class="icon big shipping fast"></i>
</div>
<div class="four wide column">
<i class="icon big truck"></i>
</div>
<div class="four wide column">
<i class="icon huge warehouse"></i>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Icon Set Logistics
Reference: https://semantic-ui.com/elements/icon.html#logistics