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. Proporciona a los usuarios varios íconos que se pueden usar para diferentes propósitos con una hermosa interfaz de usuario. En este artículo, veamos el conjunto de iconos de accesibilidad. 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. Un ícono es un glifo que se usa para representar otra cosa y puede representar estándares de accesibilidad.
Conjunto de iconos de interfaz de usuario semántica Clases de accesibilidad:
- Ícono de interpretación del lenguaje de señas estadounidense: esta clase se usa para hacer un ícono de interpretación del lenguaje de señas estadounidense.
- icono de sistemas de asistencia auditiva: esta clase se utiliza para crear un icono de sistemas de asistencia auditiva.
- icono de descripción de audio: esta clase se utiliza para crear un icono de descripción de audio.
- icono ciego: esta clase se usa para hacer un icono ciego.
- icono de braille: esta clase se utiliza para crear un icono de braille.
- icono de subtítulos ocultos: esta clase se utiliza para crear un icono de subtítulos ocultos.
- icono de contorno de subtítulos ocultos: esta clase se utiliza para crear un icono de contorno de subtítulos ocultos.
- icono sordo: esta clase se utiliza para crear un icono sordo.
- icono de baja visión: esta clase se utiliza para hacer un icono de baja visión.
- icono de volumen del teléfono: esta clase se utiliza para crear un icono de volumen del teléfono.
- icono de círculo de preguntas: esta clase se utiliza para crear un icono de círculo de preguntas.
- icono de contorno de círculo de pregunta: esta clase se utiliza para crear un icono de contorno de círculo de pregunta.
- ícono de lenguaje de señas: esta clase se usa para hacer un ícono de lenguaje de señas.
- icono tty: esta clase se utiliza para crear un icono tty.
- icono de acceso universal: esta clase se utiliza para crear un icono de acceso universal.
- icono de silla de ruedas: esta clase se utiliza para hacer un icono de silla de ruedas.
Sintaxis:
<i class="blind icon"></i>
Nota: Puede cambiar el nombre de la clase de la lista de clases anterior.
Ejemplo 1: este código demuestra todas las clases de conjunto de iconos de accesibilidad.
HTML
<!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 Accessibility </strong><br /><br /> <div class=" ui container"> <div class="ui grid"> <div class="three wide column"> <i class="american sign language interpreting icon"></i> </div> <div class="three wide column"> <i class="assistive listening systems icon"></i> </div> <div class="three wide column"> <i class="audio description icon"></i> </div> <div class="three wide column"> <i class="blind icon"></i> </div> <div class="three wide column"> <i class="braille icon"></i> </div> <div class="three wide column"> <i class="closed captioning icon"></i> </div> <div class="three wide column"> <i class="closed captioning outline icon"></i> </div> <div class="three wide column"> <i class="deaf icon"></i> </div> <div class="three wide column"> <i class="low vision icon"></i> </div> <div class="three wide column"> <i class="phone volume icon"></i> </div> </div> </div> </center> </body> </html>
Producción :
Ejemplo 2: este código muestra todas las clases de conjunto de iconos de accesibilidad.
HTML
<!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 Accessibility </strong> <br/> <br/> <div class="ui container"> <button class="ui button"> <i class="question circle icon"></i> </button> <button class="ui button"> <i class="question circle outline icon"></i> </button> <button class="ui button"> <i class="sign language icon"></i> </button> <button class="ui button"> <i class="tty icon"></i> </button> </div> </center> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#accessibility
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA