Conjunto de iconos de interfaz de usuario semántica – Part 3

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 Business. La interfaz de usuario semántica proporciona algunas de las clases de iconos más utilizadas para empresas que se utilizaron principalmente en aplicaciones comerciales o financieras.

Icono de interfaz de usuario semántica establece clases de negocios:

• libreta de direcciones : esta clase se utiliza para mostrar el icono de la libreta de direcciones.
• esquema de la libreta de direcciones : esta clase se utiliza para mostrar el icono del esquema de la libreta de direcciones.
• tarjeta de dirección : esta clase se utiliza para mostrar el icono de la tarjeta de dirección.
• contorno de la tarjeta de dirección : esta clase se utiliza para mostrar el icono del contorno de la tarjeta de dirección.
• archivo : esta clase se utiliza para mostrar el icono de archivo.
• balance scale : Esta clase se utiliza para mostrar el icono de la balanza.
• tarta de cumpleaños : esta clase se utiliza para mostrar el icono de la tarta de cumpleaños.
• libro : esta clase se utiliza para mostrar el icono del libro.
• maletín : esta clase se utiliza para mostrar el icono del maletín.
• edificio : esta clase se utiliza para mostrar el icono del edificio.
• contorno del edificio : esta clase se utiliza para mostrar el icono del contorno del edificio.
• megáfono : esta clase se utiliza para mostrar el icono de megáfono.
• bullseye : esta clase se utiliza para mostrar el icono de la diana.
• calculadora : esta clase se utiliza para mostrar el icono de la calculadora.
• calendario : esta clase se utiliza para mostrar el icono del calendario.
• esquema del calendario : esta clase se utiliza para mostrar el icono del esquema del calendario.
• calendario alternativo : esta clase se utiliza para mostrar el icono de calendario alternativo.
• esquema alternativo del calendario : esta clase se utiliza para mostrar el icono del esquema alternativo del calendario.
• certificado : esta clase se utiliza para mostrar el icono del certificado.
• área del gráfico : esta clase se utiliza para mostrar el icono del área del gráfico.
• barra de gráficos : esta clase se utiliza para mostrar el icono de la barra de gráficos.
• contorno de la barra del gráfico : esta clase se utiliza para mostrar el icono del contorno de la barra del gráfico.
• línea de gráfico : esta clase se utiliza para mostrar el icono de línea de gráfico.
• gráfico circular : esta clase se utiliza para mostrar el icono de gráfico circular.
• portapapeles : esta clase se utiliza para mostrar el icono del portapapeles.
• contorno del portapapeles : esta clase se utiliza para mostrar el icono del contorno del portapapeles.
• café : esta clase se utiliza para mostrar el icono de café.
• Columnas : esta clase se utiliza para mostrar el icono de columnas.
• compass : esta clase se utiliza para mostrar el icono de la brújula.
• contorno de la brújula : esta clase se utiliza para mostrar el icono del contorno de la brújula.
• copiar : esta clase se utiliza para mostrar el icono de copia.
• copiar esquema : esta clase se utiliza para mostrar el icono de copiar esquema.
• copyright : esta clase se utiliza para mostrar el icono de copyright.
• contorno de derechos de autor : esta clase se utiliza para mostrar el icono de contorno de derechos de autor.
• cut : Esta clase se utiliza para mostrar el icono de corte.
• editar : esta clase se utiliza para mostrar el icono de edición.
• editar esquema : esta clase se utiliza para mostrar el icono de editar esquema.
• sobre : ​​esta clase se utiliza para mostrar el icono del sobre.
• contorno del sobre : ​​esta clase se utiliza para mostrar el icono del contorno del sobre.
• sobre abierto : Esta clase se utiliza para mostrar el icono de sobre abierto.
• contorno abierto del sobre : ​​esta clase se utiliza para mostrar el icono de contorno abierto del sobre.
• cuadrado del sobre : ​​esta clase se utiliza para mostrar el icono del cuadrado del sobre.
• eraser : esta clase se utiliza para mostrar el icono del borrador.
• fax : esta clase se utiliza para mostrar el icono de fax.
• archivo : esta clase se utiliza para mostrar el icono del archivo.
• esquema de archivo : esta clase se utiliza para mostrar el icono de esquema de archivo.
• archivo alternativo : esta clase se utiliza para mostrar el icono de archivo alternativo.
• esquema alternativo de archivo : esta clase se utiliza para mostrar el icono de esquema alternativo de archivo.
• carpeta : esta clase se utiliza para mostrar el icono de la carpeta.
• esquema de carpeta : esta clase se utiliza para mostrar el icono de esquema de carpeta.
• Carpeta abierta : esta clase se utiliza para mostrar el icono de carpeta abierta.
• esquema abierto de carpeta : esta clase se utiliza para mostrar el icono de esquema abierto de carpeta.
• globo : esta clase se utiliza para mostrar el icono del globo.
• industria : esta clase se utiliza para mostrar el icono de la industria del audio.
• clip : esta clase se utiliza para mostrar el icono del clip.
• pegar : esta clase se utiliza para mostrar el icono de pegar.
• pen square : esta clase se utiliza para mostrar el icono de pen square.
• lápiz alternativo : esta clase se utiliza para mostrar el icono de lápiz alternativo.
• porcentaje : esta clase se utiliza para mostrar el icono de porcentaje.
• teléfono : esta clase se utiliza para mostrar el icono del teléfono.
• phone square : esta clase se utiliza para mostrar el icono del teléfono cuadrado.
• volumen del teléfono : esta clase se utiliza para mostrar el icono de volumen del teléfono.
• registrado : esta clase se utiliza para mostrar el icono registrado.
• esquema registrado : esta clase se utiliza para mostrar el icono de esquema registrado.
• guardar : esta clase se utiliza para mostrar el icono de guardar.
• guardar esquema : esta clase se utiliza para mostrar el icono de guardar esquema.
• sitemap : esta clase se utiliza para mostrar el icono del mapa del sitio.
• nota adhesiva : esta clase se utiliza para mostrar el icono de la nota adhesiva.
• contorno de nota adhesiva : esta clase se utiliza para mostrar el icono de contorno de nota adhesiva.
• maleta : esta clase se utiliza para mostrar el icono de la maleta.
• table : esta clase se utiliza para mostrar el icono de la tabla.
• etiqueta : esta clase se utiliza para mostrar el icono de la etiqueta.
• etiquetas : esta clase se utiliza para mostrar el icono de etiquetas.
• tareas : esta clase se utiliza para mostrar el icono de tareas.
• chincheta : esta clase se utiliza para mostrar el icono de la chincheta.
• marca registrada : esta clase se utiliza para mostrar el icono de marca registrada.

Sintaxis:

<i class="icon....business_class "></i>

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

<!DOCTYPE html>
<html>
  
<head>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
        </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
  
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>
            Semantic-UI Icon Set Business
        </strong>
        <br />
        <br />
  
        <div class="container">
  
            <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 archive"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big balance scale"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big birthday cake"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big briefcase"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big building"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big building outline"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big bullhorn"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big bullseye"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big calculator"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big calendar "></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big calendar outline"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big calendar alternate "></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big calendar alternate outline "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big certificate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big chart area"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big chart bar"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big chart bar outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big chart line"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big chart pie"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big clipboard "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big clipboard outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big coffee"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big columns"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big compass"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big compass outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big copy "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big copy outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big copyright"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big copyright outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big cut"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big edit"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big edit outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big envelope"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big envelope outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big envelope open"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big envelope open outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big envelope square"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big eraser"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big fax"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big file alternate outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big folder"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big folder outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big folder open "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big folder open outline "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big globe"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big industry"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big paperclip "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big paste"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big pen square"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big pencil alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big percent"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big phone"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big phone square"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big phone volume"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big registered"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big registered outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big save"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big registered outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big save outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sitemap"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sticky note"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sticky note outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big suitcase"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big table"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big tag"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big tags"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big tasks"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big thumbtack"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big trademark"></i>
                </div>
  
            </div>
        </div>
    </center>
</body>
  
</html>

Producción:

Conjunto de iconos de interfaz de usuario semántica

Ejemplo 2: este código muestra un ejemplo de clases de conjuntos de iconos de negocios.

<!DOCTYPE html>
<html>
  
<head>
    <link href=
 "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" />
    <script src=
 "https://code.jquery.com/jquery-3.1.1.min.js"
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
        </script>
    <script src=
 "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
  
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>
            Semantic-UI Icon Set Business
        </strong>
        <br />
        <br />
  
        <div class="container">
  
            <div class="ui labeled icon menu">
                <a class="item">
                    <i class="tasks icon"></i>
                    Task Manager
                </a>
                <a class="item">
                    <i class="chart line icon"></i>
                    View Sales
                </a>
                <a class="item">
                    <i class="bullhorn icon"></i>
                    Notifications
                </a>
  
                <a class="right item">
                    <i class="building icon"></i>
                    Organizations
                </a>
            </div>
        </div>
    </center>
</body>
  
</html>

Producción:

Conjunto de iconos de interfaz de usuario semántica

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