Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
Los iconos de la interfaz de usuario semántica se pueden utilizar para representar varias cosas y actividades. El conjunto logístico de iconos de interfaz de usuario semántica es un total de 10 iconos en el conjunto de iconos de logística que se pueden utilizar para representar objetos o actividades de servicio relacionadas con la logística. Los iconos pueden representar una actividad logística común
Conjunto de iconos de interfaz de usuario semántica Clases de logística:
- caja: Esta clase se utiliza para mostrar el icono de la caja.
- cajas: Esta clase se utiliza para mostrar los iconos que representan una gran cantidad de cajas.
- Comprobación del portapapeles: estas clases se utilizan para mostrar el icono del portapapeles marcado.
- lista del portapapeles: estas clases se utilizan para mostrar el icono de la lista del portapapeles.
- dolly: esta clase se utiliza para mostrar el icono de la muñeca.
- plataforma rodante: esta clase se utiliza para mostrar el icono de plataforma rodante.
- palet: esta clase se utiliza para mostrar el icono de palet.
- envío rápido: estas clases se utilizan para mostrar el icono de envío rápido.
- camión: esta clase se utiliza para mostrar el icono del camión.
- warehouse: esta clase se utiliza para mostrar el icono del almacén.
Sintaxis:
<i class="icon ... Icon-Set-Logistics-Classes"></i>
Ejemplo 1: El siguiente ejemplo ilustra el uso de los 10 íconos enumerados anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Icon Set Logistics</title>
<!-- Scripts and CSS -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<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>
Producción:
Conjunto de iconos de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo muestra el uso de iconos del conjunto de logística con diferentes colores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Icon Set Logistics</title>
<!-- Scripts and CSS -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<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>
Producción:
Conjunto de iconos de interfaz de usuario semántica
Ejemplo 3: El siguiente ejemplo muestra el uso de iconos de conjunto de logística con variación de tamaño.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Icon Set Logistics</title>
<!-- Scripts and CSS -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<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>
Producción:
Conjunto de iconos de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/icon.html#logistics
Publicación traducida automáticamente
Artículo escrito por prashantrathore1159 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA