Semantic UI es un CSS de código abierto basado en less y jQuery que se utiliza para desarrollar interfaces web atractivas y receptivas. En este artículo, veremos el conjunto de iconos de géneros proporcionado por la interfaz de usuario semántica. El conjunto de iconos de género consta de 13 iconos que se utilizan para representar géneros o tipos de sexualidad.
Conjunto de iconos de interfaz de usuario semántica Clases de géneros:
- sin género:Esta clase se utiliza para mostrar el icono sin género.
- mars: esta clase se utiliza para mostrar el icono de género mars.
- mars double: esta clase se utiliza para mostrar el icono de género double mars.
- trazo de marte: esta clase se utiliza para mostrar el icono de género de marte con un trazo.
- trazo de marte horizontal:Esta clase se utiliza para mostrar el icono de género de Marte horizontal con un trazo.
- trazo de marte vertical:Esta clase se utiliza para mostrar el icono de género de Marte vertical con un trazo.
- mercurio:Esta clase se utiliza para mostrar el icono de género de mercurio.
- neutro: esta clase se utiliza para mostrar el icono de género neutro.
- transgénero: esta clase se usa para mostrar el ícono transgénero.
- suplente transgénero:Esta clase se usa para mostrar el icono transgénero alternativo.
- Venus:Esta clase se usa para mostrar el icono de género de venus.
- venus doble: esta clase se utiliza para mostrar el icono de venus doble.
- venus marte:Esta clase se utiliza para mostrar el icono de género de Venus y Marte.
Sintaxis:
<i class="icon Genders-Icon-Class/Classes"></i>
Ejemplo: El siguiente ejemplo ilustra el uso de los 13 íconos enumerados anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<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 Genders</h3>
</div>
<div class="ui grid">
<div class="three wide column">
<i class="icon big genderless"></i>
</div>
<div class="three wide column">
<i class="icon big mars"></i>
</div>
<div class="three wide column">
<i class="icon big mars double"></i>
</div>
<div class="three wide column">
<i class="icon big mars stroke"></i>
</div>
<div class="three wide column">
<i class="icon big mars stroke horizontal"></i>
</div>
<div class="three wide column">
<i class="icon big mars stroke vertical"></i>
</div>
<div class="three wide column">
<i class="icon big mercury"></i>
</div>
<div class="three wide column">
<i class="icon big neuter"></i>
</div>
<div class="three wide column">
<i class="icon big transgender"></i>
</div>
<div class="three wide column">
<i class="icon big transgender alternate"></i>
</div>
<div class="three wide column">
<i class="icon big venus"></i>
</div>
<div class="three wide column">
<i class="icon big venus double"></i>
</div>
<div class="three wide column">
<i class="icon big venus mars"></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#genders