La interfaz de usuario semántica es un marco CSS construido con menos y jQuery . Viene con elementos y módulos preconstruidos y un excelente soporte para temas, lo que facilita a los desarrolladores desarrollar excelentes sitios web. En este artículo, aprenderemos sobre las formas del conjunto de iconos de la interfaz de usuario semántica que se utilizan para representar una variedad de formas. Hay un total de 22 iconos en el conjunto de iconos de formas .
Conjunto de iconos de interfaz de usuario semántica Clases de formas:
- marcador: esta clase se utiliza para mostrar el icono de marcador.
- contorno de marcador: estas clases se utilizan para mostrar el icono de marcador delineado.
- calendario : esta clase se utiliza para mostrar el icono del calendario.
- esquema de calendario: estas clases se utilizan para mostrar el icono de calendario delineado.
- certificado: esta clase se utiliza para mostrar el icono del certificado.
- círculo: esta clase se utiliza para mostrar la forma del círculo como un icono.
- contorno del círculo: estas clases se utilizan para mostrar la forma del círculo delineado como un icono.
- nube: esta clase se utiliza para mostrar el icono de la nube.
- comentario: esta clase se utiliza para mostrar el icono de comentario.
- contorno de comentario: estas clases se utilizan para mostrar el icono de comentario delineado.
- archivo: esta clase se utiliza para mostrar el icono del archivo.
- contorno del archivo: estas clases se utilizan para mostrar el icono del archivo con contorno.
- carpeta: esta clase se utiliza para mostrar el icono de la carpeta.
- esquema de carpeta: estas clases se utilizan para mostrar el icono de carpeta delimitado.
- corazón: esta clase se utiliza para mostrar el icono del corazón.
- contorno del corazón: estas clases se utilizan para mostrar el icono del corazón delineado.
- marcador de mapa: estas clases se utilizan para mostrar el icono de marcador de mapa.
- play: esta clase se utiliza para mostrar el icono de reproducción.
- cuadrado: esta clase se utiliza para mostrar el icono cuadrado.
- contorno cuadrado: estas clases se utilizan para mostrar el icono cuadrado delineado.
- estrella: esta clase se utiliza para mostrar el icono de estrella.
- contorno de estrella: estas clases se utilizan para mostrar el icono de estrella delineado.
Sintaxis:
<i class="icon bookmark"></i>
Ejemplo 1: El siguiente ejemplo ilustra el uso de los 22 íconos enumerados anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Icon Set Shapes</title>
<!-- Scripts and CSS -->
<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;
}
h4 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
<h4>Semantic UI - Icon Set Shapes</h4>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon big bookmark"></i>
</div>
<div class="four wide column">
<i class="icon big bookmark outline"></i>
</div>
<div class="four wide column">
<i class="icon big calendar"></i>
</div>
<div class="four wide column">
<i class="icon big calendar outline"></i>
</div>
<div class="four wide column">
<i class="icon big certificate"></i>
</div>
<div class="four wide column">
<i class="icon big circle"></i>
</div>
<div class="four wide column">
<i class="icon big circle outline"></i>
</div>
<div class="four wide column">
<i class="icon big cloud"></i>
</div>
<div class="four wide column">
<i class="icon big comment"></i>
</div>
<div class="four wide column">
<i class="icon big comment outline"></i>
</div>
<div class="four wide column">
<i class="icon big file"></i>
</div>
<div class="four wide column">
<i class="icon big file outline"></i>
</div>
<div class="four wide column">
<i class="icon big folder"></i>
</div>
<div class="four wide column">
<i class="icon big folder outline"></i>
</div>
<div class="four wide column">
<i class="icon big heart"></i>
</div>
<div class="four wide column">
<i class="icon big heart outline"></i>
</div>
<div class="four wide column">
<i class="icon big map marker"></i>
</div>
<div class="four wide column">
<i class="icon big play"></i>
</div>
<div class="four wide column">
<i class="icon big square"></i>
</div>
<div class="four wide column">
<i class="icon big square outline"></i>
</div>
<div class="four wide column">
<i class="icon big star"></i>
</div>
<div class="four wide column">
<i class="icon big star outline"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Interfaz de usuario semántica: formas de conjuntos de iconos
Ejemplo 2: El siguiente ejemplo muestra el uso de iconos de conjuntos de formas con diferentes colores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Icon Set Shapes</title>
<!-- Scripts and CSS -->
<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;
}
h4 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
<h4>Semantic UI - Icon Set Shapes
with Colors Variation</h4>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon red big bookmark"></i>
</div>
<div class="four wide column">
<i class="icon orange big bookmark outline"></i>
</div>
<div class="four wide column">
<i class="icon yellow big calendar"></i>
</div>
<div class="four wide column">
<i class="icon olive big calendar outline"></i>
</div>
<div class="four wide column">
<i class="icon green big certificate"></i>
</div>
<div class="four wide column">
<i class="icon teal big circle"></i>
</div>
<div class="four wide column">
<i class="icon blue big circle outline"></i>
</div>
<div class="four wide column">
<i class="icon violet big cloud"></i>
</div>
<div class="four wide column">
<i class="icon purple big comment"></i>
</div>
<div class="four wide column">
<i class="icon pink big comment outline"></i>
</div>
<div class="four wide column">
<i class="icon brown big file"></i>
</div>
<div class="four wide column">
<i class="icon grey big file outline"></i>
</div>
<div class="four wide column">
<i class="icon black big folder"></i>
</div>
<div class="four wide column">
<i class="icon red big folder outline"></i>
</div>
<div class="four wide column">
<i class="icon yellow big heart"></i>
</div>
<div class="four wide column">
<i class="icon teal big heart outline"></i>
</div>
<div class="four wide column">
<i class="icon orange big map marker"></i>
</div>
<div class="four wide column">
<i class="icon pink big play"></i>
</div>
<div class="four wide column">
<i class="icon grey big square"></i>
</div>
<div class="four wide column">
<i class="icon blue big square outline"></i>
</div>
<div class="four wide column">
<i class="icon green big star"></i>
</div>
<div class="four wide column">
<i class="icon olive big star outline"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Interfaz de usuario semántica: formas de conjunto de iconos con variación de colores
Ejemplo 3: El siguiente ejemplo muestra el uso de iconos de conjunto de formas con variación de tamaño.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Icon Set Shapes</title>
<!-- Scripts and CSS -->
<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;
}
h4 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
<h4>Semantic UI - Icon Set Shapes
with Sizes Variation</h4>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon tiny bookmark"></i>
</div>
<div class="four wide column">
<i class="icon tiny bookmark outline"></i>
</div>
<div class="four wide column">
<i class="icon small calendar"></i>
</div>
<div class="four wide column">
<i class="icon small calendar outline"></i>
</div>
<div class="four wide column">
<i class="icon small certificate"></i>
</div>
<div class="four wide column">
<i class="icon small circle"></i>
</div>
<div class="four wide column">
<i class="icon circle outline"></i>
</div>
<div class="four wide column">
<i class="icon cloud"></i>
</div>
<div class="four wide column">
<i class="icon comment"></i>
</div>
<div class="four wide column">
<i class="icon comment outline"></i>
</div>
<div class="four wide column">
<i class="icon large file"></i>
</div>
<div class="four wide column">
<i class="icon large file outline"></i>
</div>
<div class="four wide column">
<i class="icon large folder"></i>
</div>
<div class="four wide column">
<i class="icon large folder outline"></i>
</div>
<div class="four wide column">
<i class="icon big heart"></i>
</div>
<div class="four wide column">
<i class="icon big heart outline"></i>
</div>
<div class="four wide column">
<i class="icon big map marker"></i>
</div>
<div class="four wide column">
<i class="icon big play"></i>
</div>
<div class="four wide column">
<i class="icon huge square"></i>
</div>
<div class="four wide column">
<i class="icon huge square outline"></i>
</div>
<div class="four wide column">
<i class="icon huge star"></i>
</div>
<div class="four wide column">
<i class="icon huge star outline"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Interfaz de usuario semántica: formas de conjunto de iconos con variación de tamaños
Referencia: https://semantic-ui.com/elements/icon.html#shapes
Publicación traducida automáticamente
Artículo escrito por prashantrathore1159 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA