Diseño de conjunto de iconos de interfaz de usuario semántica

Posted on by Rudeus Greyrat

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 diseño. La interfaz de usuario semántica proporciona algunas de las clases de iconos más utilizadas para el diseño que se usaron principalmente en los editores y aquí están las clases.

Clases de diseño de conjunto de iconos de interfaz de usuario semántica:

  • ajustar: esta clase se utiliza para mostrar el icono de ajuste.
  • clon: esta clase se usa para mostrar el icono de clon
  • contorno de clonación: esta clase se utiliza para mostrar el contorno del icono de clonación.
  • copiar _ : Esta clase se utiliza para mostrar el icono de copia.
  • contorno de copia: esta clase se utiliza para mostrar el contorno del icono de copia.
  • crop: esta clase se utiliza para mostrar el icono de recorte.
  • crosshairs: esta clase se utiliza para mostrar el icono de la cruz.
  • cut: esta clase se utiliza para mostrar el icono de corte.
  • editar: esta clase se utiliza para mostrar el icono de edición.
  • editar contorno: esta clase se utiliza para mostrar el contorno del icono de edición.
  • borrador: esta clase se utiliza para mostrar el icono del borrador.
  • eye: esta clase se utiliza para mostrar el icono del ojo.
  • Cuentagotas: esta clase se utiliza para mostrar el icono del cuentagotas.
  • barra oblicua: esta clase se utiliza para mostrar el icono de barra oblicua.
  • contorno de barra oblicua: esta clase se utiliza para mostrar el contorno del icono de barra oblicua.
  • grupo de objetos: esta clase se utiliza para mostrar el icono del grupo de objetos.
  • contorno del grupo de objetos: esta clase se utiliza para mostrar el contorno del icono del grupo de objetos.
  • desagrupar objetos: esta clase se utiliza para mostrar el icono de desagrupar objetos.
  • contorno de desagrupación de objetos: esta clase se utiliza para mostrar el contorno del icono de desagrupación de objetos.
  • pincel: esta clase se utiliza para mostrar el icono del pincel.
  • pegar: esta clase se utiliza para mostrar el icono de pegar.
  • lápiz alternativo: esta clase se utiliza para mostrar el icono de lápiz alternativo.
  • guardar: esta clase se utiliza para mostrar el icono de guardar.
  • guardar contorno: esta clase se utiliza para mostrar el contorno del icono de guardar.
  • tinte: esta clase se utiliza para mostrar el icono de tinte.
     

Sintaxis: 

<i class="icon.... design-icon-class "></i>

Ejemplo 1: este código demuestra todas las clases de conjunto de iconos de diseño.

HTML

<!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 Design
        </strong>
        <br />
        <br />
  
        <div class=" ui container">
  
            <div class="ui grid">
                <div class="three wide column">
                    <i class="icon big adjust"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big clone"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big clone 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 crop"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big crosshairs"></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 eraser"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big eye "></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big eye dropper"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big eye slash"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big eye slash outline"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big object group "></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big object group outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big object ungroup"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big object ungroup outline "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big paint brush"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big paste"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big pencil alternate"></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 : 

Ejemplo 2: este código demuestra el uso de clases de conjuntos de iconos de diseño.

HTML

<!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 Design</strong>
        <br />
        <br />
        <div class="ui container">
            <button class="ui button">
                <i class="cut icon"></i>
            </button>
            <button class="ui button">
                <i class="copy icon"></i>
            </button>
            <button class="ui button">
                <i class="paste icon"></i>
            </button>
            <button class="ui button">
                <i class="save icon"></i>
            </button>
        </div>
    </center>
</body>
  
</html>

Producción:

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

Publicación traducida automáticamente

Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *