Mapas 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 audio y video. La interfaz de usuario semántica proporciona algunas de las clases de iconos más utilizadas para mapas que se usaban principalmente para representar algo en el mapa.

Conjunto de iconos de interfaz de usuario semántica Clases de mapas:

• ambulancia : esta clase se utiliza para mostrar el icono de ambulancia.
• ancla : esta clase se utiliza para mostrar el icono de ancla.
• balance scale : Esta clase se utiliza para mostrar el icono de la balanza.
• baño : esta clase se utiliza para mostrar el icono del baño.
• bed : esta clase se utiliza para mostrar el icono de la cama.
• cerveza : esta clase se utiliza para mostrar el icono de cerveza.
• bell : esta clase se utiliza para mostrar el icono de la campana.
• contorno de campana : esta clase se utiliza para mostrar el icono de contorno de campana.
• campana inclinada : esta clase se utiliza para mostrar el icono de campana inclinada.
• contorno de barra oblicua de campana : esta clase se utiliza para mostrar el icono de contorno de barra oblicua de campana.
• bicicleta : esta clase se utiliza para mostrar el icono de la bicicleta.
• binoculares : esta clase se utiliza para mostrar el icono de binoculares.
• tarta de cumpleaños : esta clase se utiliza para mostrar el icono de la tarta de cumpleaños.
• blind : esta clase se utiliza para mostrar el icono de la persiana.
• bomba : esta clase se utiliza para mostrar el icono de la bomba.
• libro : esta clase se utiliza para mostrar el icono del libro.
• marcador : esta clase se utiliza para mostrar el icono de marcador.
• contorno de marcador : esta clase se utiliza para mostrar el icono de contorno de marcador.
• 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.
• coche : esta clase se utiliza para mostrar el icono del coche.
• café : esta clase se utiliza para mostrar el icono de café.
• crosshairs : esta clase se utiliza para mostrar el icono de la cruz.
• signo de dólar : esta clase se utiliza para mostrar el icono del signo de dólar.
• eye : esta clase se utiliza para mostrar el icono del ojo.
• barra oblicua : esta clase se utiliza para mostrar el icono de barra oblicua.
• contorno de barra oblicua : esta clase se utiliza para mostrar el icono de contorno de barra oblicua.
• avión de combate : esta clase se utiliza para mostrar el icono del avión de combate.
• fuego : esta clase se utiliza para mostrar el icono de fuego.
• extintor de incendios : esta clase se utiliza para mostrar el icono del extintor de incendios.
• bandera : esta clase se utiliza para mostrar el icono de la bandera.
• contorno de la bandera : esta clase se utiliza para mostrar el icono del contorno de la bandera.
• bandera a cuadros : esta clase se utiliza para mostrar el icono de la bandera a cuadros.
• matraz : esta clase se utiliza para mostrar el icono del matraz.
• gamepad : esta clase se utiliza para mostrar el icono del gamepad.
• martillo : esta clase se utiliza para mostrar el icono del martillo.
• regalo : esta clase se utiliza para mostrar el icono de regalo.
• glass martini : esta clase se utiliza para mostrar el icono de glass martini.
• globo : esta clase se utiliza para mostrar el icono del globo.
• gorro de graduación : esta clase se utiliza para mostrar el icono del gorro de graduación.
• h cuadrado : esta clase se utiliza para mostrar el icono h cuadrado.
• corazón : esta clase se utiliza para mostrar el icono del corazón.
• contorno del corazón : esta clase se utiliza para mostrar el icono del contorno del corazón.
• latido del corazón : esta clase se utiliza para mostrar el icono del latido del corazón.
• home : esta clase se utiliza para mostrar el icono de inicio.
• hospital : esta clase se utiliza para mostrar el icono del hospital.
• contorno del hospital : esta clase se utiliza para mostrar el icono del contorno del hospital.
• imagen : esta clase se utiliza para mostrar el icono de la imagen.
• contorno de la imagen : esta clase se utiliza para mostrar el icono del contorno de la imagen.
• imágenes : esta clase se utiliza para mostrar el icono de imágenes.
• contorno de imágenes : esta clase se utiliza para mostrar el icono de contorno de imágenes.
• industria : esta clase se utiliza para mostrar el icono de la industria.
• info : esta clase se utiliza para mostrar el icono de información.
• círculo de información : esta clase se utiliza para mostrar el icono del círculo de información.
• key : esta clase se utiliza para mostrar el icono de la llave.
• hoja : esta clase se utiliza para mostrar el icono de la hoja.
• limón : esta clase se utiliza para mostrar el icono de limón.
• contorno de limón : esta clase se utiliza para mostrar el icono de contorno de limón.
• salvavidas : esta clase se utiliza para mostrar el icono del salvavidas.
• contorno del salvavidas : esta clase se utiliza para mostrar el icono del contorno del salvavidas.
• bombilla : esta clase se utiliza para mostrar el icono de la bombilla.
• contorno de bombilla : esta clase se utiliza para mostrar el icono de contorno de bombilla.
• flecha de ubicación : esta clase se utiliza para mostrar el icono de flecha de ubicación.
• baja visión : esta clase se utiliza para mostrar el icono de baja visión.
• imán : esta clase se utiliza para mostrar el icono del imán.
• male : esta clase se utiliza para mostrar el icono masculino.
• mapa : esta clase se utiliza para mostrar el icono del mapa.
• contorno del mapa : esta clase se utiliza para mostrar el icono del contorno del mapa.
• marcador de mapa : esta clase se utiliza para mostrar el icono del marcador de mapa.
• marcador de mapa alternativo : esta clase se utiliza para mostrar el icono de marcador de mapa alternativo.
• pin de mapa : esta clase se utiliza para mostrar el icono de pin de mapa.
• señales de mapa : esta clase se utiliza para mostrar el icono de señales de mapa.
• botiquín : esta clase se utiliza para mostrar el icono del botiquín.
• alternativa de billete de dinero : esta clase se utiliza para mostrar el icono de alternativa de billete de dinero.
• contorno alternativo del billete de dinero : esta clase se utiliza para mostrar el icono del contorno alternativo del billete de dinero.
• motocicleta : Esta clase se usa para mostrar el ícono de la motocicleta.
• música : esta clase se utiliza para mostrar el icono de la música.
• periódico : esta clase se utiliza para mostrar el icono del periódico.
• contorno del periódico : esta clase se utiliza para mostrar el icono del contorno del periódico.
• pata : esta clase se utiliza para mostrar el icono de la pata.
• 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.
• avión : esta clase se utiliza para mostrar el icono del avión.
• enchufe : esta clase se utiliza para mostrar el icono del enchufe.
• plus : esta clase se utiliza para mostrar el icono más.
• plus square : esta clase se utiliza para mostrar el icono de plus square.
• contorno cuadrado más : esta clase se utiliza para mostrar el icono de contorno cuadrado más.
• print : esta clase se utiliza para mostrar el icono de impresión.
• reciclar : esta clase se utiliza para mostrar el icono de reciclaje.
• carretera : esta clase se utiliza para mostrar el icono de la carretera.
• cohete : esta clase se utiliza para mostrar el icono del cohete.
• search : esta clase se utiliza para mostrar el icono de búsqueda.
• menos de búsqueda : esta clase se utiliza para mostrar el icono de menos de búsqueda.
• search plus : esta clase se utiliza para mostrar el icono de búsqueda más.
• barco : esta clase se utiliza para mostrar el icono del barco.
• bolsa de la compra : esta clase se utiliza para mostrar el icono de la bolsa de la compra.
• cesta de la compra : esta clase se utiliza para mostrar el icono de la cesta de la compra.
• carrito de compras : esta clase se utiliza para mostrar el ícono del carrito de compras.
• ducha : esta clase se usa para mostrar el icono de la ducha.
• vista de la calle : esta clase se utiliza para mostrar el icono de la vista de la calle.
• metro : esta clase se utiliza para mostrar el icono del metro.
• maleta : esta clase se utiliza para mostrar el icono de la maleta.
• etiqueta : esta clase se utiliza para mostrar el icono de la etiqueta.
• etiquetas : esta clase se utiliza para mostrar el icono de etiquetas.
• taxi : esta clase se utiliza para mostrar el icono de taxi.
• chincheta : esta clase se utiliza para mostrar el icono de la chincheta.
• billete alternativo : esta clase se utiliza para mostrar el icono de billete alternativo.
• tinte : esta clase se utiliza para mostrar el icono de tinte.
• tren : esta clase se utiliza para mostrar el icono del tren.
• árbol : esta clase se utiliza para mostrar el icono del árbol.
• trofeo : esta clase se utiliza para mostrar el icono del trofeo.
• camión : esta clase se utiliza para mostrar el icono del camión.
• tty : esta clase se utiliza para mostrar el icono tty.
• paraguas : esta clase se utiliza para mostrar el icono del paraguas.
• universidad : esta clase se utiliza para mostrar el icono de la universidad.
• cuchara de utensilio : esta clase se utiliza para mostrar el icono de cuchara de utensilio.
• utensilios : Esta clase se utiliza para mostrar el icono de utensilios.
• silla de ruedas : esta clase se utiliza para mostrar el icono de la silla de ruedas.
• wifi : esta clase se utiliza para mostrar el icono de wifi.
• llave inglesa : esta clase se utiliza para mostrar el icono de llave inglesa.

Sintaxis:

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

Ejemplo 1:  este código muestra todas las clases de conjuntos de iconos de Maps.

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Icon Set Maps</title>
    <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 Maps
        </strong>
        <br />
        <br />
  
        <div class="container">
            <div class="ui grid">
                <div class="three wide column">
                    <i class="icon big ambulance"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big anchor"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big balance scale"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big bath"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big bed"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big beer"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big bell"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big bell outline"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big bell slash"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big bell slash outline"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big bicycle"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big binoculars"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big birthday cake"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big blind"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big bomb"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big book  "></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big bookmark"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big bookmark outline"></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 car"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big coffee"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big crosshairs "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big dollar sign"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big eye"></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 fighter jet"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big fire"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big fire extinguisher"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big flag"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big flag outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big flag checkered"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big flask"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big gamepad"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big gavel"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big gift"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big glass martini"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big globe"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big graduation cap"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big h square"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big heart"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big heart outline "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big heartbeat"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big home"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big hospital "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big hospital outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big image"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big image outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big images"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big images outline "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big industry "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big info"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big info circle "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big key "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big leaf"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big lemon "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big lemon outline "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big life ring"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big life ring outline "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big lightbulb "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big lightbulb outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big location arrow "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big low vision "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big magnet "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big male "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big map "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big map outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big map marker "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big map marker alternate "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big map pin"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big map signs "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big medkit "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big money bill alternate "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big money bill alternate outline "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big motorcycle"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big music "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big newspaper "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big newspaper outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big paw"></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 plane"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big plug"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big plus"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big plus square "></i>
                </div>
                <div class="three wide column">
                    <i class="icon big plus square outline"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big print"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big recycle"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big road"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big rocket"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big search"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big search minus"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big search plus"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big ship"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big shopping bag"></i>
                </div>
  
                <div class="three wide column">
                    <i class="icon big shopping basket"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big shopping cart"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big shower"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big street view"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big subway"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big suitcase"></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 taxi"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big thumbtack"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big ticket alternate"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big tint"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big train"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big tree"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big trophy"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big truck"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big tty"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big umbrella"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big university"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big utensil spoon"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big utensils"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big wheelchair"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big wifi"></i>
                </div>
                <div class="three wide column">
                    <i class="icon big wrench"></i>
                </div>
            </div>
  
        </div>
    </center>
</body>
  
</html>

Producción:

Mapas 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 Maps.

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Icon Set Maps</title>
    <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 Maps
        </strong>
        <br />
        <br />
  
        <div class="container">
             <div class="ui compact message">
                <i class= "icon large info circle"></i>
                Get more info of the update here
              </div>
              <br>
              <div class="ui compact message">
                <i class= "icon large bell"></i>
                Notifications
              </div>
                
              </div>
          
    </center>
</body>
  
</html>

Producción:

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

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