Flechas 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 Flechas . La interfaz de usuario semántica proporciona algunas de las clases de iconos más utilizadas para las flechas que se utilizaron principalmente en la navegación a las páginas siguientes o para indicar algunos puntos importantes, etc.

Conjunto de iconos de IU semántica Clases de flechas:

• ángulo doblado hacia abajo: esta clase se utiliza para mostrar el icono de ángulo doblado hacia abajo.
• ángulo doble izquierda: Esta clase se utiliza para mostrar el icono de ángulo doble izquierda.
• ángulo doble derecho: Esta clase se utiliza para mostrar el icono de ángulo doble derecho.
• ángulo duplicado: esta clase se utiliza para mostrar el icono de ángulo duplicado.
• ángulo hacia abajo: esta clase se utiliza para mostrar el icono de ángulo hacia abajo.
• ángulo izquierdo: esta clase se utiliza para mostrar el icono de ángulo izquierdo.
• ángulo derecho: esta clase se utiliza para mostrar el icono de ángulo derecho.
• ángulo arriba: esta clase se utiliza para mostrar el icono de ángulo arriba.
• Flecha alternativa círculo hacia abajo: Esta clase se utiliza para flecha alternativa círculo hacia abajo icono.
• contorno de círculo alternativo de flecha hacia abajo: esta clase se utiliza para mostrar el contorno del icono de círculo alternativo de flecha hacia abajo.
• flecha alternativa círculo izquierda: Esta clase se utiliza para mostrar el icono de flecha alternativa círculo izquierda.
• contorno izquierdo del círculo alternativo de la flecha: esta clase se utiliza para mostrar el contorno del icono izquierdo del círculo alternativo de la flecha.
• flecha alternativa círculo derecho: Esta clase se utiliza para mostrar el icono de flecha alternativa círculo derecho.
• Flecha alternativa círculo derecho contorno: Esta clase se utiliza para mostrar el contorno del icono de flecha alternativa círculo derecho.
• círculo alternativo de flecha hacia arriba: esta clase se utiliza para mostrar el icono de círculo alternativo de flecha hacia arriba.
• contorno de círculo alternativo de flecha hacia arriba: esta clase se utiliza para mostrar el contorno del icono de círculo alternativo de flecha hacia arriba.
• círculo de flecha hacia abajo: esta clase se utiliza para mostrar el icono de círculo de flecha hacia abajo.
• círculo de flecha a la izquierda: esta clase se utiliza para mostrar el icono de círculo de flecha a la izquierda.
• círculo de flecha a la derecha: esta clase se utiliza para mostrar el icono de círculo de flecha a la derecha.
• círculo de flecha hacia arriba: esta clase se utiliza para mostrar el icono de círculo de flecha hacia arriba.
• flecha hacia abajo: esta clase se utiliza para mostrar el icono de flecha hacia abajo.
• flecha izquierda: esta clase se utiliza para mostrar el icono de flecha izquierda.
• flecha derecha: esta clase se utiliza para mostrar el icono de flecha derecha.
• flecha arriba: esta clase se utiliza para mostrar el icono de flecha arriba.
• flechas alternativas: esta clase se utiliza para mostrar el icono de flechas alternativas.
• flechas horizontales alternas: Esta clase se utiliza para mostrar el icono de flechas horizontales alternas.
• flechas verticales alternas: Esta clase se utiliza para mostrar el icono de flechas verticales alternas.
• caret down: esta clase se utiliza para mostrar el icono de intercalación hacia abajo.
• intercalación izquierda: esta clase se utiliza para mostrar el icono de intercalación izquierda.
• intercalación a la derecha: esta clase se utiliza para mostrar el icono de intercalación a la derecha.
• Cuadrado de intercalación hacia abajo: esta clase se utiliza para mostrar el icono de intercalado hacia abajo.
• contorno cuadrado hacia abajo: esta clase se utiliza para mostrar el icono de contorno cuadrado hacia abajo.
• Cuadrado de intercalación a la izquierda: esta clase se utiliza para mostrar el icono del cuadrado de intercalación a la izquierda.
• Contorno izquierdo del cuadrado de intercalación: esta clase se utiliza para mostrar el icono del contorno izquierdo del cuadrado de intercalación.
• cuadrado de intercalación a la derecha: esta clase se utiliza para mostrar el icono de cuadrado de intercalación a la derecha.
• contorno cuadrado derecho de intercalación: esta clase se utiliza para mostrar el icono de contorno cuadrado derecho de intercalación.
• caret square up: esta clase se utiliza para mostrar el icono de intercalación cuadrado hacia arriba.
• contorno cuadrado de intercalación: esta clase se utiliza para mostrar el icono de contorno cuadrado de intercalación.
• intercalación arriba: esta clase se utiliza para mostrar el icono de intercalación arriba.
• flecha del carrito hacia abajo: esta clase se utiliza para mostrar el icono de la flecha del carrito hacia abajo.
• línea de gráfico: esta clase se utiliza para mostrar el icono de línea de gráfico.
• círculo de cheurón hacia abajo: esta clase se utiliza para mostrar el icono de círculo de cheurón hacia abajo.
• chevron circle left: esta clase se utiliza para mostrar el icono de chevron circle left.
• chevron circle right: esta clase se utiliza para mostrar el icono de chevron circle right.
• chevron circle up: esta clase se utiliza para mostrar el icono de chevron circle up.
• cheurón abajo: esta clase se utiliza para mostrar el icono de cheurón abajo.
• cheurón izquierdo: esta clase se utiliza para mostrar el icono de cheurón izquierdo.
• cheurón a la derecha: esta clase se utiliza para mostrar el icono de cheurón a la derecha.
• cheurón arriba: esta clase se utiliza para mostrar el icono de cheurón arriba.
• descarga en la nube: esta clase se utiliza para mostrar el icono de descarga en la nube.
• carga en la nube: esta clase se utiliza para mostrar el icono de carga en la nube.
• download: Esta clase se utiliza para mostrar el icono de descarga.
• intercambio alternativo: Esta clase se utiliza para mostrar el icono de intercambio alternativo.
• expandir flechas alternativas: esta clase se utiliza para mostrar el icono de expandir flechas alternativas.
• alternativa externa: esta clase se utiliza para mostrar el icono de alternativa externa.
• alternativa de cuadrado externo: esta clase se utiliza para mostrar el icono de alternativa de cuadrado externo.
• mano apuntando hacia abajo: esta clase se utiliza para mostrar el icono de mano apuntando hacia abajo.
• contorno de mano apuntando hacia abajo: esta clase se utiliza para mostrar el icono de contorno de mano apuntando hacia abajo.
• punto de mano izquierda: Esta clase se utiliza para mostrar el icono de punto de mano izquierda.
• contorno izquierdo del punto de la mano: esta clase se utiliza para mostrar el icono del contorno izquierdo del punto de la mano.
• mano apuntando a la derecha: esta clase se utiliza para mostrar el icono de mano apuntando a la derecha.
• contorno de punto de mano derecha: esta clase se utiliza para mostrar el icono de contorno de punto de mano derecha.
• mano apuntando hacia arriba: Esta clase se utiliza para mostrar el icono de la mano apuntando hacia arriba.
• contorno de mano apuntando hacia arriba: esta clase se utiliza para mostrar el icono de contorno de mano apuntando hacia arriba.
• Puntero de mano: esta clase se utiliza para mostrar el icono de descripción de audio.
• contorno de puntero de mano: esta clase se utiliza para mostrar el icono de contorno de puntero de mano.
• history: esta clase se utiliza para mostrar el icono de historial.
• nivel alternativo hacia abajo: Esta clase se utiliza para mostrar el icono de nivel alternativo hacia abajo.
• subir de nivel alternativo: Esta clase se utiliza para mostrar el icono de subir de nivel alternativo.
• flecha de ubicación: esta clase se utiliza para mostrar el icono de flecha de ubicación.
• flecha larga alternativa hacia abajo: esta clase se utiliza para mostrar el icono de flecha larga alternativa hacia abajo.
• flecha larga alternativa a la izquierda: esta clase se utiliza para mostrar el icono de flecha larga alternativa a la izquierda.
• flecha larga alternativa a la derecha: esta clase se utiliza para mostrar el icono de flecha larga alternativa a la derecha.
• flecha larga alternativa hacia arriba: esta clase se utiliza para mostrar el icono de flecha larga alternativa hacia arriba.
• puntero del ratón: esta clase se utiliza para mostrar el icono del puntero del ratón.
• play: esta clase se utiliza para mostrar el icono de reproducción.
• aleatorio: esta clase se utiliza para mostrar el icono aleatorio.
• reciclar: esta clase se utiliza para mostrar el icono de reciclaje.
• rehacer: esta clase se utiliza para mostrar el icono de rehacer.
• rehacer alternativo: esta clase se utiliza para mostrar el icono de rehacer alternativo.
• responder: esta clase se utiliza para mostrar el icono de respuesta.
• responder a todos: esta clase se utiliza para mostrar el icono de responder a todos.
• retweet: esta clase se utiliza para mostrar el icono de retweet.
• compartir: esta clase se utiliza para mostrar el icono de compartir.
• compartir cuadrado: esta clase se utiliza para mostrar el icono de compartir cuadrado.
• compartir contorno cuadrado: esta clase se utiliza para mostrar el icono de compartir contorno cuadrado.
• iniciar sesión alternativa: esta clase se utiliza para mostrar el signo en el icono alternativo.
• cierre de sesión alternativo: esta clase se utiliza para mostrar el icono de cierre de sesión alternativo.
• ordenar: esta clase se utiliza para mostrar el icono de ordenar.
• orden alfabético hacia abajo: esta clase se utiliza para mostrar el icono de orden alfabético hacia abajo.
• orden alfabético hacia arriba: esta clase se utiliza para mostrar el icono de orden alfabético hacia arriba.
• ordenar cantidad hacia abajo: esta clase se utiliza para mostrar el icono de ordenar cantidad hacia abajo.
• ordenar cantidad hacia arriba: esta clase se utiliza para mostrar el icono de ordenar cantidad hacia arriba.
• ordenar hacia abajo: esta clase se utiliza para mostrar el icono de ordenar hacia abajo.
• ordenar numérico hacia abajo: esta clase se utiliza para mostrar el icono de ordenar numérico hacia abajo.
• ordenar numérico hacia arriba: esta clase se utiliza para mostrar el icono de ordenar numérico hacia arriba.
• sort up: esta clase se utiliza para mostrar el icono de ordenación.
• sincronización: esta clase se utiliza para mostrar el icono de sincronización.
• sincronización alternativa: esta clase se utiliza para mostrar el icono de sincronización alternativa.
• altura del texto: esta clase se utiliza para mostrar el icono de altura del texto.
• ancho de texto: esta clase se utiliza para mostrar el icono de ancho de texto.
• deshacer: esta clase se utiliza para mostrar el icono de deshacer.
• deshacer alternativa: Esta clase se utiliza para mostrar el icono de deshacer alternativa.
• cargar: esta clase se utiliza para mostrar el icono de carga.

Sintaxis:

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

Ejemplo 1: este código muestra todas las clases de conjunto de iconos de flechas.

<!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>
</head>
  
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>
            Semantic-UI Icon Set Arrows
        </strong>
        <br />
        <br />
  
        <div class="container">
            <div class="ui grid">
                <div class="three wide column">
                    <i class="icon big angle double down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big angle double left"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big angle double right"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big angle double up"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big angle down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big angle left"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big angle right"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big angle up"></i>
                </div>
                <div class="three wide column">
                    <i class=
                       "icon big arrow alternate circle down">
                    </i>
                </div>
                <div class="three wide column">
                    <i class=
                       "icon big arrow alternate circle down outline">
                    </i>
                </div>
                <div class="three wide column">
                    <i class="icon big arrow alternate circle left">
                    </i>
                </div>
                <div class="three wide column">
                    <i class="icon big arrow alternate circle left outline">
                    </i>
                </div>
                <div class="three wide column">
                    <i class=
                       "icon big arrow alternate circle right">
                    </i>
                </div>
                <div class="three wide column">
                    <i class=
                       "icon big arrow alternate circle right outline">
                    </i>
                </div>
                <div class="three wide column">
                    <i class=
                       "icon big arrow alternate circle up">
                    </i>
                </div>
                <div class="three wide column">
                    <i class=
                       "icon big arrow alternate circle up outline">
                    </i>
                </div>
                <div class="three wide column">
                    <i class="icon arrow circle down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big arrow circle left"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big arrow circle right"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big arrow circle up"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big arrow down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big arrow left"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big arrow right"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big arrow up "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big arrows alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big arrows alternate horizontal"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big arrows alternate vertical"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big play caret down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big play caret left "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big caret right "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big caret square down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big caret square down outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big caret square left"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big caret square left outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big caret square right"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big caret square right outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big caret square up "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big caret square up outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big caret up"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big cart arrow down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big chart line"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big chevron circle down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big chevron circle left"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big chevron circle right "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big chevron circle up"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big chevron down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big chevron left"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big chevron right"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big chevron up "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big cloud download"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big cloud upload"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big download"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big exchange alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big expand arrows alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big external alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big external square alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big cloud hand point down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big cloud hand point down outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big cloud hand point left"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big hand point left outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big hand point up"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big hand pointer up outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big history"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big level down alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big level up alternate "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big location arrow"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big long arrow alternate down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big long arrow alternate left"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big long arrow alternate right"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big long arrow alternate up"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big mouse pointer"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big play"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big random"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big recycle"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big redo"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big redo alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big reply "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big reply all"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big share"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big share square"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big share square outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sign in alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sign out alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sort"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sort alphabet down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sort alphabet up"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sort amount down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sort amount up"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sort down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sort numeric down"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sort numeric up"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sort up"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sync"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big sync alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big text height "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big text width "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big undo"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big undo alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big upload"></i>
                </div>
            </div>
        </div>
    </center>
</body>
  
</html>

Producción:

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

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

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Icon Set Arrows</title>
    <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>
</head>
  
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>
            Semantic-UI Icon Set Arrows
        </strong>
        <br />
        <br />
  
        <div class="container">
            <div class="ui buttons">
                <button class="ui icon button">
                    <i class="angle double left icon"></i>
                </button>
                <button class="ui icon button">
                    <i class="angle left icon"></i>
                </button>
                <button class="ui button">
                    1
                </button>
                <button class="ui button">
                    2
                </button>
                <button class="ui button">
                    2
                </button>
                <button class="ui button">
                    4
                </button>
                <button class="ui button">
                    5
                </button>
                <button class="ui right icon button">
                    <i class="angle right icon"></i>
                </button>
                <button class="ui icon button">
                    <i class="angle double right icon"></i>
                </button>
            </div>
        </div>
    </center>
</body>
  
</html>

Producción:

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

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