La interfaz de usuario semántica es un marco de interfaz de usuario rico en componentes que se utiliza para diseñar y crear temas de sitios web. En este artículo, veremos los íconos de usuarios y personas que vienen con la interfaz de usuario semántica. Hay un total de 31 iconos en el conjunto de iconos de Usuarios y Personas.
Conjunto de iconos de interfaz de usuario semántica Usuarios y clases de personas:
- dirección con libreta: estas clases se utilizan juntas para mostrar el icono de la libreta de direcciones.
- Direccióncon libroy contorno : estas clases se utilizan juntas para mostrar el icono de la libreta de direcciones con contorno.
- dirección con tarjeta : estas clases se usan juntas para mostrar el icono de la tarjeta de dirección.
- dirección con tarjeta y contorno : estas clases se utilizan juntas para mostrar el icono de la tarjeta de dirección con contorno.
- bed: Esta clase se utiliza para mostrar el icono de la cama.
- ciego: Esta clase se usa para mostrar un icono que muestra a una persona ciega caminando.
- niño: Esta clase se utiliza para mostrar un icono de niño.
- femenino: Esta clase se utiliza para mostrar el icono que representa el género femenino.
- fruncir el ceño: esta clase se utiliza para mostrar un icono con el ceño fruncido.
- fruncir el ceño con contorno: estas clases se utilizan para mostrar un icono que muestra un rostro con el ceño fruncido delineado.
- identificacióncon credencial: estas clases se usan juntas para mostrar el ícono de la credencial de identificación.
- id con insignia y contorno: estas clases se usan juntas para mostrar el icono de la insignia de identificación delineada.
- id con tarjeta: estas clases se utilizan juntas para mostrar el icono de la tarjeta de identificación.
- id con tarjeta y contorno: estas clases se utilizan juntas para mostrar el icono de la tarjeta de identificación con contorno.
- male: Esta clase se utiliza para mostrar el icono que representa el género masculino.
- meh: esta clase se usa para mostrar una cara con una expresión meh.
- meh con contorno: estas clases se utilizan para mostrar un rostro delineado con una expresión meh.
- power with off: estas clases se utilizan juntas para mostrar el icono de apagado.
- sonrisa: esta clase se utiliza para mostrar un icono de cara sonriente.
- sonrisa con contorno: estas clases se utilizan juntas para mostrar un icono de cara sonriente con contorno.
- street with view: estas clases se usan juntas para mostrar los íconos de street view.
- usuario: esta clase se utiliza para mostrar un icono de usuario simple.
- usuario con contorno: estas clases se usan juntas para mostrar un icono de usuario con contorno.
- usuario con círculo: estas clases se usan juntas para mostrar un icono de usuario circular.
- usuario con círculo y contorno: estas clases se utilizan juntas para mostrar un icono de usuario circular con contorno.
- usuario con md: estas clases se utilizan para mostrar un icono de usuario relacionado con la medicina.
- usuario con signo más: estas clases se usan juntas para mostrar un usuario con un icono más.
- usuario con secreto: estas clases se usan juntas para mostrar un icono de usuario secreto.
- usuario con tiempos: estas clases se usan juntas para mostrar un usuario con un ícono de tiempos.
- usuarios: esta clase se utiliza para mostrar un icono que representa a un grupo de usuarios.
- silla de ruedas: Esta clase se utiliza para mostrar un icono que representa a una persona en silla de ruedas.
Sintaxis:
<i class="icon Users-&-People-Icon-Class/Classes"></i>
Ejemplo: El siguiente ejemplo muestra el uso de los 31 íconos enumerados anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Icon Set Users & People</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 Users & People</h3>
</div>
<div class="ui grid">
<div class="three wide column">
<i class="icon big address book"></i>
</div>
<div class="three wide column">
<i class="icon big address book outline"></i>
</div>
<div class="three wide column">
<i class="icon big address card"></i>
</div>
<div class="three wide column">
<i class="icon big address card outline"></i>
</div>
<div class="three wide column">
<i class="icon big bed"></i>
</div>
<div class="three wide column">
<i class="icon big blind"></i>
</div>
<div class="three wide column">
<i class="icon big child"></i>
</div>
<div class="three wide column">
<i class="icon big female"></i>
</div>
<div class="three wide column">
<i class="icon big frown"></i>
</div>
<div class="three wide column">
<i class="icon big frown outline"></i>
</div>
<div class="three wide column">
<i class="icon big id badge"></i>
</div>
<div class="three wide column">
<i class="icon big id badge outline"></i>
</div>
<div class="three wide column">
<i class="icon big id card"></i>
</div>
<div class="three wide column">
<i class="icon big id card outline"></i>
</div>
<div class="three wide column">
<i class="icon big male"></i>
</div>
<div class="three wide column">
<i class="icon big meh"></i>
</div>
<div class="three wide column">
<i class="icon big meh outlinne"></i>
</div>
<div class="three wide column">
<i class="icon big power off"></i>
</div>
<div class="three wide column">
<i class="icon big smile"></i>
</div>
<div class="three wide column">
<i class="icon big smile outline"></i>
</div>
<div class="three wide column">
<i class="icon big street view"></i>
</div>
<div class="three wide column">
<i class="icon big user"></i>
</div>
<div class="three wide column">
<i class="icon big user outline"></i>
</div>
<div class="three wide column">
<i class="icon big user circle"></i>
</div>
<div class="three wide column">
<i class="icon big user circle outline"></i>
</div>
<div class="three wide column">
<i class="icon big user md"></i>
</div>
<div class="three wide column">
<i class="icon big user plus"></i>
</div>
<div class="three wide column">
<i class="icon big user secret"></i>
</div>
<div class="three wide column">
<i class="icon big user times"></i>
</div>
<div class="three wide column">
<i class="icon big users"></i>
</div>
<div class="three wide column">
<i class="icon big wheelchair"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Interfaz de usuario semántica: conjunto de iconos Usuarios y personas
Ejemplo 2: El siguiente ejemplo muestra cómo usar los íconos de usuarios y personas con diferentes colores y tamaños.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Icon Set Users & People</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 Users & People</h3>
</div>
<div class="ui grid">
<div class="three wide column">
<i class="icon red small address book"></i>
</div>
<div class="three wide column">
<i class="icon blue small address book outline"></i>
</div>
<div class="three wide column">
<i class="icon green small address card"></i>
</div>
<div class="three wide column">
<i class="icon teal small address card outline"></i>
</div>
<div class="three wide column">
<i class="icon yellow small bed"></i>
</div>
<div class="three wide column">
<i class="icon blue blind"></i>
</div>
<div class="three wide column">
<i class="icon violet child"></i>
</div>
<div class="three wide column">
<i class="icon purple female"></i>
</div>
<div class="three wide column">
<i class="icon pink frown"></i>
</div>
<div class="three wide column">
<i class="icon brown frown outline"></i>
</div>
<div class="three wide column">
<i class="icon grey large id badge"></i>
</div>
<div class="three wide column">
<i class="icon black large id badge outline"></i>
</div>
<div class="three wide column">
<i class="icon yellow large id card"></i>
</div>
<div class="three wide column">
<i class="icon teal large id card outline"></i>
</div>
<div class="three wide column">
<i class="icon grey big male"></i>
</div>
<div class="three wide column">
<i class="icon pink big meh"></i>
</div>
<div class="three wide column">
<i class="icon blue big meh outlinne"></i>
</div>
<div class="three wide column">
<i class="icon purple big power off"></i>
</div>
<div class="three wide column">
<i class="icon red big smile"></i>
</div>
<div class="three wide column">
<i class="icon orange big smile outline"></i>
</div>
<div class="three wide column">
<i class="icon olive huge street view"></i>
</div>
<div class="three wide column">
<i class="icon green huge user"></i>
</div>
<div class="three wide column">
<i class="icon teal huge user outline"></i>
</div>
<div class="three wide column">
<i class="icon violet huge user circle"></i>
</div>
<div class="three wide column">
<i class="icon blue big user circle outline"></i>
</div>
<div class="three wide column">
<i class="icon pink big user md"></i>
</div>
<div class="three wide column">
<i class="icon grey big user plus"></i>
</div>
<div class="three wide column">
<i class="icon brown big user secret"></i>
</div>
<div class="three wide column">
<i class="icon pink big user times"></i>
</div>
<div class="three wide column">
<i class="icon violet big users"></i>
</div>
<div class="three wide column">
<i class="icon pink big wheelchair"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#users–people