Editores de conjunto de iconos de interfaz de usuario semántica

Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.

La interfaz de usuario semántica proporciona a los usuarios varios íconos diferentes que se pueden usar para diferentes propósitos con una hermosa interfaz de usuario. Los íconos agregan más belleza al sitio web que la representación textual. 

En este artículo, veamos el conjunto de iconos de los editores. La interfaz de usuario semántica proporciona algunas de las clases de iconos más utilizadas para el diseño que se utilizaron principalmente en los editores y las clases son las siguientes.

Un icono es un glifo que se usa para representar otra cosa y puede representar editores de texto y acciones comunes del editor.

Clases de editores de conjunto de iconos de interfaz de usuario semántica:

• portapapeles: esta clase se utiliza para crear un icono de portapapeles.
• contorno del portapapeles: esta clase se utiliza para crear un icono de contorno del portapapeles.
• clon: esta clase se utiliza para crear un icono de clonación.
• esquema de clonación: esta clase se utiliza para crear un icono de esquema de clonación.
• columnas: esta clase se utiliza para crear un icono de columnas
• copiar: esta clase se utiliza para crear un icono de copia.
• copiar esquema: esta clase se utiliza para crear un icono de copia de esquema.
• cortar: esta clase se usa para crear un icono de corte
• editar: esta clase se usa para crear y editar íconos
• editar esquema: esta clase se utiliza para crear un icono de editar esquema.
• borrador: esta clase se utiliza para crear un icono de borrador
• archivo: esta clase se utiliza para crear un icono de archivo
• esquema de archivo: esta clase se utiliza para crear un icono de esquema de archivo
• archivo alternativo: esta clase se utiliza para crear un icono de archivo alternativo
• esquema alternativo de archivo: esta clase se utiliza para crear un icono de esquema alternativo de archivo
• fuente: esta clase se utiliza para crear un icono de fuente
• encabezado: esta clase se utiliza para crear un icono de encabezado
• i cursor: esta clase se utiliza para crear un icono de cursor I
• sangría: esta clase se utiliza para crear un icono con sangría
• cursiva: esta clase se utiliza para crear un icono en cursiva
• linkify: esta clase se utiliza para crear un icono de enlace
• lista: esta clase se utiliza para crear un icono de lista
• lista alternativa: esta clase se utiliza para crear una lista del icono alternativo.
• esquema alternativo de lista: esta clase se utiliza para crear un icono de esquema alternativo de lista
• list ol: esta clase se utiliza para crear una lista icono «ol»
•  lista ul: esta clase se utiliza para crear un icono de lista ul
•  outdent: esta clase se utiliza para crear un icono outdent.
•  avión de papel: esta clase se utiliza para crear un icono de avión de papel
•  contorno de avión de papel: esta clase se utiliza para crear un icono de contorno de avión de papel
•  clip: esta clase se utiliza para crear un icono de clip
•  párrafo: esta clase se utiliza para crear un icono de párrafo
•  pegar: esta clase se utiliza para crear un icono de pegar
•  lápiz alternativo: esta clase se utiliza para crear un icono de lápiz alternativo
•  imprimir: esta clase se utiliza para crear un icono de impresión
•  cita izquierda: esta clase se utiliza para crear un icono de cita izquierda
•  citar a la derecha: esta clase se utiliza para crear un icono de citar a la derecha
•  rehacer: esta clase se utiliza para crear un icono de rehacer
•  rehacer alternativo: esta clase se utiliza para crear un icono de rehacer alternativo
•  responder: esta clase se utiliza para crear un icono de respuesta
•  responder a todos: esta clase se utiliza para crear un icono de respuesta a todos
•  compartir: esta clase se utiliza para crear un icono de compartir
•  tachado: esta clase se utiliza para crear un icono tachado
•  subíndice: esta clase se utiliza para crear un icono de subíndice
•  superíndice: esta clase se utiliza para crear un icono de superíndice
•  sincronización: esta clase se utiliza para crear un icono de sincronización
•  sincronización alternativa: esta clase se utiliza para crear un icono de sincronización alternativa
•  tabla: esta clase se utiliza para crear un icono de tabla
•  tareas: esta clase se utiliza para crear un icono de tareas
•  altura del texto: esta clase se utiliza para crear un icono de altura de texto
•  ancho de texto: esta clase se utiliza para crear un icono de ancho de texto
•  th: Esta clase se usa para crear un icono th
•  th large: esta clase se usa para crear un icono th large
•  ª lista: esta clase se utiliza para crear un icono de lista ª
•  papelera: esta clase se utiliza para crear un icono de papelera
•  papelera alternativa: esta clase se utiliza para crear un icono de papelera alternativa
•  Contorno alternativo de papelera: esta clase se utiliza para crear un icono de contorno alternativo de papelera
•  subrayado: esta clase se utiliza para crear un icono de subrayado
•  deshacer: esta clase se utiliza para crear un icono de deshacer
•  deshacer alternativo: esta clase se utiliza para crear un icono de deshacer alternativo
•  desvincular: esta clase se utiliza para crear un icono de desvincular

Sintaxis:

<i class="tasks"></i>

Ejemplo 1: este código demuestra todas las clases de conjunto de iconos del editor.

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />    
</head>
  
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>Semantic-UI Icon Set Editors</strong>
        <br/><br/>        
  
        <div class="ui container">
            <div class="ui grid">
                  
                <div class="three wide column">
                    <i class="clipboard outline icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="clipboard icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="clone icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="clone outline icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="columns icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="copy icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="copy outline icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="cut icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="edit icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="edit outline icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="eraser icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="file icon"></i>
                </div>
                <div class="three wide column">
                    <i class="file outline icon"></i>
                </div>
                <div class="three wide column">
                <i class="file alternate icon"></i>
                </div>
                <div class="three wide column">
                    <i class="file alternate outline icon"></i>
                </div>
                <div class="three wide column">
                    <i class="font icon"></i>
                </div>
                <div class="three wide column">
                    <i class="heading icon"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big save"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big save outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big tint"></i>
                </div>
            </div>
        </div>
    </center>
</body>
</html>

Producción:

Editores de conjunto de iconos de interfaz de usuario semántica

Ejemplo 2: el código siguiente muestra otro conjunto de editores de iconos.

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />    
</head>
  
<body>
    <center>
        <h1 class="ui green header">Geeksforgeeks</h1>
        <strong>Semantic UI Icon Set Editors</strong>
        <br />
        <br />
        <div class="ui container">
            <button class="ui button">
                <i class="i cursor icon"></i>
            </button>
            <button class="ui button">
                <i class="indent icon"></i>
            </button>
            <button class="ui button">
                <i class="italic icon"></i>
            </button>
            <button class="ui button">
                <i class="linkify icon"></i>
            </button>
        </div>
    </center>
</body>
</html>

Producción:

Editores de conjunto de iconos de interfaz de usuario semántica

Referencia: https://semantic-ui.com/elements/icon.html#editors