Semantic UI es un marco CSS similar a Bootstrap. Se envía con componentes semánticos preconstruidos que ayudan a desarrollar experiencias web receptivas y hermosas. En este artículo, veremos el conjunto de iconos de vehículos que viene con la interfaz de usuario semántica.
El conjunto de iconos de vehículos es un conjunto de 18 iconos utilizados para representar vehículos y transporte.
Conjunto de iconos de interfaz de usuario semántica Clases de vehículos:
- ambulancia: esta clase se utiliza para mostrar el icono de ambulancia.
- bicicleta : esta clase se utiliza para mostrar el icono de la bicicleta.
- bus : esta clase se utiliza para mostrar el icono del bus.
- coche : esta clase se utiliza para mostrar el icono del coche.
- caza con avión : estas clases se utilizan para mostrar el icono del avión de combate.
- motocicleta : Esta clase se usa para mostrar el ícono de la motocicleta.
- papel con avión : estas clases se utilizan para mostrar el icono del avión de papel.
- papel con avión y contorno : estas clases se utilizan para mostrar el icono del avión de papel con contorno.
- avión : esta clase se utiliza para mostrar el icono de avión simple.
- cohete : esta clase se utiliza para mostrar el icono del cohete.
- barco : esta clase se utiliza para mostrar el icono del barco.
- compras con carrito : estas clases se utilizan para mostrar el ícono del carrito de compras.
- espacio con transbordador : estas clases se utilizan para mostrar el icono del transbordador espacial.
- metro : esta clase se utiliza para mostrar el icono del metro.
- taxi : esta clase se utiliza para mostrar el icono de taxi.
- tren : esta clase se utiliza para mostrar el icono del tren.
- camión : esta clase se utiliza para mostrar el icono del camión.
- silla de ruedas : esta clase se utiliza para mostrar el icono de la silla de ruedas.
Sintaxis:
<i class="icon Vehicle-Icon-Class/Classes"></i>
Ejemplo: El siguiente ejemplo muestra el uso de los 18 íconos enumerados anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Icon Set Vehicles</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
.ui.container {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Semantic UI - Icon Set Vehicles</h3>
</div>
<div class="ui grid">
<div class="two wide column">
<i class="icon big ambulance"></i>
</div>
<div class="two wide column">
<i class="icon big bicycle"></i>
</div>
<div class="two wide column">
<i class="icon big bus"></i>
</div>
<div class="two wide column">
<i class="icon big car"></i>
</div>
<div class="two wide column">
<i class="icon big fighter jet"></i>
</div>
<div class="two wide column">
<i class="icon big motorcycle"></i>
</div>
<div class="two wide column">
<i class="icon big paper plane"></i>
</div>
<div class="two wide column">
<i class="icon big paper plane outline"></i>
</div>
<div class="two wide column">
<i class="icon big plane"></i>
</div>
<div class="two wide column">
<i class="icon big rocket"></i>
</div>
<div class="two wide column">
<i class="icon big ship"></i>
</div>
<div class="two wide column">
<i class="icon big shopping cart"></i>
</div>
<div class="two wide column">
<i class="icon big space shuttle"></i>
</div>
<div class="two wide column">
<i class="icon big subway"></i>
</div>
<div class="two wide column">
<i class="icon big taxi"></i>
</div>
<div class="two wide column">
<i class="icon big train"></i>
</div>
<div class="two wide column">
<i class="icon big truck"></i>
</div>
<div class="two wide column">
<i class="icon big wheelchair"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Interfaz de usuario semántica: conjunto de iconos de vehículos
Ejemplo 2: El siguiente ejemplo muestra las variaciones de los iconos de los vehículos con diferentes colores y tamaños.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Icon Set Vehicles</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
.ui.container {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Semantic UI - Icon Set Vehicles</h3>
</div>
<div class="ui grid">
<div class="two wide column">
<i class="icon red small ambulance"></i>
</div>
<div class="two wide column">
<i class="icon orange small bicycle"></i>
</div>
<div class="two wide column">
<i class="icon yellow small bus"></i>
</div>
<div class="two wide column">
<i class="icon olive small car"></i>
</div>
<div class="two wide column">
<i class="icon green fighter jet"></i>
</div>
<div class="two wide column">
<i class="icon teal motorcycle"></i>
</div>
<div class="two wide column">
<i class="icon blue paper plane"></i>
</div>
<div class="two wide column">
<i class="icon brown large paper plane outline"></i>
</div>
<div class="two wide column">
<i class="icon black large plane"></i>
</div>
<div class="two wide column">
<i class="icon grey large rocket"></i>
</div>
<div class="two wide column">
<i class="icon purple large ship"></i>
</div>
<div class="two wide column">
<i class="icon violet big shopping cart"></i>
</div>
<div class="two wide column">
<i class="icon red big space shuttle"></i>
</div>
<div class="two wide column">
<i class="icon yellow big subway"></i>
</div>
<div class="two wide column">
<i class="icon green big taxi"></i>
</div>
<div class="two wide column">
<i class="icon teal huge train"></i>
</div>
<div class="two wide column">
<i class="icon pink huge truck"></i>
</div>
<div class="two wide column">
<i class="icon huge wheelchair"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Interfaz de usuario semántica: conjunto de iconos Vehículos con diferentes tamaños y colores
Referencia: https://semantic-ui.com/elements/icon.html#vehicles