Conjunto de iconos de interfaz de usuario semántica Audio y vídeo

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 audio y video que se usaron principalmente en aplicaciones de video o chat.

Conjunto de iconos de interfaz de usuario semántica Clases de audio y video:

• audiodescripción: Esta clase se utiliza para mostrar el icono de audiodescripción.
• Hacia atrás: esta clase se utiliza para mostrar el icono hacia atrás.
• círculo: esta clase se utiliza para mostrar el icono del círculo.
• contorno del círculo: esta clase se utiliza para mostrar el contorno del icono del círculo.
• subtítulos ocultos: esta clase se utiliza para mostrar el icono de subtítulos ocultos.
• contorno de subtítulos ocultos: esta clase se utiliza para mostrar el contorno del icono de subtítulos ocultos.
• compress: esta clase se utiliza para mostrar el icono comprimido.
• expulsar: esta clase se utiliza para mostrar el icono de expulsión.
• expandir: esta clase se usa para mostrar el ícono de expandir.
• expandir flechas alternativas: Esta clase se utiliza para mostrar la alternativa de expandir el icono de flechas.
• retroceso rápido: esta clase se utiliza para mostrar el icono de retroceso rápido.
• avance rápido: esta clase se utiliza para mostrar el icono de avance rápido.
• archivo de audio: esta clase se utiliza para mostrar el icono de archivo de audio.
• contorno del archivo de audio: esta clase se utiliza para mostrar el contorno del icono del archivo de audio.
• archivo de video: esta clase se utiliza para mostrar el icono de archivo de video.
• contorno de archivo de vídeo: esta clase se utiliza para mostrar el contorno del icono de archivo de vídeo.
• film: Esta clase se utiliza para mostrar el icono de la película.
• reenviar: esta clase se utiliza para mostrar el icono de reenviar.
• auriculares: esta clase se utiliza para mostrar el icono de los auriculares.
• micrófono: esta clase se utiliza para mostrar el icono del micrófono.
• barra inclinada del micrófono: esta clase se utiliza para mostrar el icono de barra inclinada del micrófono.
• música: esta clase se utiliza para mostrar el icono de la música.
• pausa: esta clase se utiliza para mostrar el icono de pausa.
• círculo de pausa: esta clase se utiliza para mostrar el icono del círculo de pausa.
• contorno del círculo de pausa: esta clase se utiliza para mostrar el contorno del icono del círculo de pausa.
• volumen del teléfono: esta clase se utiliza para mostrar el icono de volumen del teléfono.
• play: esta clase se utiliza para mostrar el icono de reproducción.
• círculo de juego: esta clase se utiliza para mostrar el icono del círculo de juego.
• contorno del círculo de juego: esta clase se utiliza para mostrar el contorno del icono del círculo de juego.
• podcast: esta clase se utiliza para mostrar el icono de podcast.
• aleatorio: esta clase se utiliza para mostrar el icono aleatorio.
• rehacer: esta clase se utiliza para mostrar el icono de rehacer.
• rehacer alternativo: esta clase se utiliza para mostrar el icono alternativo para rehacer.
• rss: esta clase se utiliza para mostrar el icono de rss.
• rss square: esta clase se utiliza para mostrar el icono de rss square.
• paso atrás: Esta clase se utiliza para mostrar el icono de paso atrás.
• paso adelante: esta clase se utiliza para mostrar el icono de paso adelante.
• stop: esta clase se utiliza para mostrar el icono de parada.
• círculo de parada: esta clase se utiliza para mostrar el icono del círculo de parada.
• contorno del círculo de parada: esta clase se utiliza para mostrar el contorno del icono del círculo de parada.
• sincronización: esta clase se utiliza para mostrar el icono de sincronización.
• sincronización alternativa: esta clase se utiliza para mostrar la alternativa del icono de sincronización.
• deshacer: esta clase se utiliza para mostrar el icono de deshacer.
• deshacer alternativo: esta clase se utiliza para mostrar el icono alternativo de deshacer.
• video: esta clase se utiliza para mostrar el icono de video.
• bajar volumen: esta clase se utiliza para mostrar el icono de bajar volumen.
• volumen apagado: esta clase se utiliza para mostrar el icono de volumen apagado.
• subir volumen: esta clase se utiliza para mostrar el icono de subir volumen.

Sintaxis:

<i class="icon....audio description "></i>

Nota: El desarrollador puede cambiar el nombre de la clase para el icono seleccionado según sea necesario.

Ejemplo 1:  este código demuestra todas las clases de conjuntos de iconos de audio y video.

<!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 Audio and Video</strong>
      
        <br/><br/>
  
        <div class="ui container">
  
            <div class="ui grid">
                <div class="three wide column">
                  <i class="icon big audio description "></i>
                </div>
                <div class="three wide column">
                  <i class="icon big backward"></i>
                </div>
  
                <div class="three wide column">
                  <i class="icon big circle"></i>
                </div>
  
                <div class="three wide column">
                  <i class="icon big circle outline"></i>
                </div>
  
                <div class="three wide column">
                  <i class="icon big closed captioning"></i>
                </div>
  
                <div class="three wide column">
                  <i class="icon big closed captioning outline"></i>
                </div>
  
                <div class="three wide column">
                  <i class="icon big compress"></i>
                </div>
  
                <div class="three wide column">
                  <i class="icon big eject"></i>
                </div>
  
                <div class="three wide column">
                  <i class="icon big expand "></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 fast backward"></i>
                </div>
  
                <div class="three wide column">
                  <i class="icon big fast forward"></i>
                </div>
  
                <div class="three wide column">
                  <i class="icon big file audio"></i>
                </div>
  
                <div class="three wide column">
                  <i class="icon big file audio outline "></i>
                </div>
  
                <div class="three wide column">
                  <i class="icon big file video"></i>
                </div>
  
                <div class="three wide column">
                  <i class="icon big file video outline "></i>
                </div>
  
                <div class="three wide column">
                  <i class="icon big film "></i>
                </div>
                <div class="three wide column">
                  <i class="icon big forward"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big headphones"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big microphone"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big microphone slash"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big music"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big pause"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big pause circle "></i>
                </div>
                <div class="three wide column">
                  <i class="icon big pause circle outline"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big phone volume"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big play"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big play circle"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big play circle outline"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big podcast "></i>
                </div>
                <div class="three wide column">
                  <i class="icon big random"></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 rss"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big rss square"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big step backward"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big step forward"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big stop"></i>
                    </div>
                <div class="three wide column">
                  <i class="icon big stop circle"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big stop circle outline"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big sync"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big sync"></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 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 video "></i>
                </div>
                <div class="three wide column">
                  <i class="icon big volume down"></i>
                </div>
                <div class="three wide column">
                  <i class="icon big volume off "></i>
                </div>
                <div class="three wide column">
                  <i class="icon big volume up "></i>
                </div>
            </div>
        </div>
    </center>
</body>
</html>

Producción:

Ejemplo 2: este código muestra un ejemplo de clases de conjuntos de iconos de audio y video.

<!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 Audio and Video </strong>
        <br/><br/>
  
        <div class="ui container">
          <div class="ui icon buttons">
            <button class="ui button">
              <i class="blue headphones large icon"></i>
            </button>
            <button class="ui button">
              <i class="blue microphone slash large icon"></i>
            </button>
            <button class="ui button">
              <i class="blue volume up large icon"></i>
            </button>
            <button class="ui button">
              <i class="blue video large icon"></i>
            </button>
          </div>         
        </div>    
    </center>
</body>
</html>

Producción:    

Referencia: https://semantic-ui.com/elements/icon.html#audio–video