Comunicación 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 sobre el conjunto de iconos de comunicación. 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. Un ícono es un glifo que se usa para representar otra cosa y los íconos representan formas comunes de comunicación.

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

• libreta de direcciones: esta clase se utiliza para configurar el icono de la libreta de direcciones.
• esquema de la libreta de direcciones:  esta clase se utiliza para establecer el icono del esquema de la libreta de direcciones.
• tarjeta de dirección:  esta clase se utiliza para establecer el icono de la tarjeta de dirección.
• contorno de la tarjeta de dirección:  esta clase se utiliza para configurar el icono del contorno de la tarjeta de dirección.
• interpretación del lenguaje de señas americano: Esta clase se utiliza para configurar la interpretación del lenguaje de señas americano.
• sistemas de asistencia auditiva: Esta clase se utiliza para configurar los sistemas de asistencia auditiva.
• at: esta clase se utiliza para establecer el icono de signo de arroba.
• campana: Esta clase se utiliza para establecer el icono de señal de campana.
• contorno de campana: esta clase se utiliza para establecer el icono de contorno de campana.
• campana inclinada: esta clase se utiliza para establecer el icono de campana inclinada.
• contorno de barra oblicua de campana: esta clase se utiliza para establecer el icono de contorno de barra oblicua de campana.
• megáfono: Esta clase se utiliza para establecer el icono de megáfono.
• comentario: esta clase se utiliza para establecer el icono de comentario.
• contorno de comentario: esta clase se utiliza para establecer el icono de contorno de comentario.
• comentario alternativo: esta clase se utiliza para establecer el icono de comentario alternativo.
• esquema alternativo de comentarios: esta clase se utiliza para establecer el icono de esquema alternativo de comentarios.
• comentarios: esta clase se utiliza para establecer el icono de comentarios.
• esquema de comentarios: esta clase se utiliza para establecer el icono de esquema de comentarios.
• sobre: ​​esta clase se utiliza para configurar el icono del sobre.
• contorno del sobre: ​​esta clase se utiliza para configurar el icono del contorno del sobre.
• sobre abierto: Esta clase se utiliza para establecer el icono de sobre abierto.
• contorno abierto del sobre: ​​esta clase se utiliza para establecer el icono de contorno abierto del sobre.
• cuadrado del sobre: ​​esta clase se utiliza para configurar el icono del cuadrado del sobre.
• fax: esta clase se utiliza para configurar el icono de fax.
• bandeja de entrada: esta clase se utiliza para configurar el icono de la bandeja de entrada.
• idioma: Esta clase se utiliza para establecer el icono de idioma.
• micrófono: esta clase se utiliza para configurar el icono del micrófono.
• barra inclinada del micrófono: esta clase se utiliza para establecer el icono de barra inclinada del micrófono.
• móvil: esta clase se utiliza para configurar el icono móvil.
• alternativa móvil: esta clase se utiliza para establecer el icono de alternativa móvil.
• avión de papel: esta clase se utiliza para configurar el icono del avión de papel.
• contorno del avión de papel: esta clase se utiliza para configurar el icono del contorno del avión de papel.
• teléfono: esta clase se utiliza para configurar el icono del teléfono.
• cuadrado del teléfono: esta clase se utiliza para configurar el icono del cuadrado del teléfono.
• volumen del teléfono: esta clase se utiliza para configurar el icono de volumen del teléfono.
• rss: esta clase se utiliza para configurar el icono de rss.
• rss square: esta clase se utiliza para configurar el icono de rss square.
• tty: esta clase se utiliza para configurar el icono tty.
• wifi: esta clase se utiliza para configurar el icono de wifi.

Sintaxis:

<i class="icon.... address book"></i>

Nota: El desarrollador puede usar las clases anteriores según la necesidad usando la sintaxis anterior.

Ejemplo 1: este código demuestra todas las clases de conjuntos de iconos de comunicación.

<!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 Communication</strong>
        <br/>
  
        <div class="ui container">
            <div class="ui grid">
                <div class="three wide column">
                    <i class="address book icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="address book outline icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="address card icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="address card outline icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="american sign language interpreting icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="assistive listening systems icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="at icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="bell icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="bell outline icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="bell slash icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="bell slash outline icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="bullhorn icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="comment icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="comment outline icon"></i>
                </div>
  
                <div class="three wide column">
                    <i class="comment alternate icon"></i>
                </div>
            </div>
       </div> 
    </center>
</body>
</html>

Producción:

Ejemplo 2: este código demuestra todas las clases de conjuntos de iconos de comunicación.

<!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 Communication</strong>
        <br />
        <br />
        <div class="ui container">
            <button class="ui button">
                <i class="comment alternate outline icon"></i>
            </button>
            <button class="ui button">
                <i class="comments icon"></i>
            </button>
            <button class="ui button">
                <i class="comments outline icon"></i>
            </button>
            <button class="ui button">
                <i class="envelope icon"></i>
            </button>
        </div>
    </center>
</body>
</html>

Producción:

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