{"id":6254,"date":"2022-01-30T19:14:13","date_gmt":"2022-01-30T19:14:13","guid":{"rendered":"https:\/\/outstandingthemes.com\/como-usar-glifos-en-css-con-y-sin-bootstrap\/"},"modified":"2024-11-27T21:59:44","modified_gmt":"2024-11-27T21:59:44","slug":"como-usar-glifos-en-css-con-y-sin-bootstrap","status":"publish","type":"post","link":"https:\/\/outstandingthemes.com\/es\/como-usar-glifos-en-css-con-y-sin-bootstrap\/","title":{"rendered":"C\u00f3mo usar glifos en CSS con y sin Bootstrap"},"content":{"rendered":"\n

Los proyectos web pueden ser dif\u00edciles de comprender, sobre todo cuando no hay iconos para distinguir los controles. Por eso los glifos son muy influyentes en los sitios web, y no hay que olvidarse de ellos. <\/p>\n\n

\n Aunque, por supuesto, por sencillo que parezca, emplear glifos en Hojas de Estilo en Cascada (CSS) es una historia muy distinta. Antes de poder utilizar glifos, primero hay que codificarlos y probarlos para asegurarse de que funcionan correctamente. Hemos practicado esto varias veces en muchos sitios, como aqu\u00ed en Marjoe.dk<\/a> \n<\/p>\n\n

\n En caso de que te est\u00e9s preguntando c\u00f3mo utilizarlo en CSS, tanto con Bootstrap como sin \u00e9l, hemos incluido una breve gu\u00eda para que puedas consultarla. Pero primero, conozcamos mejor los glifos. \n<\/p>\n\n

Glifos y sus aplicaciones<\/strong>\n<\/p>\n\n

\n Los glifos son una colecci\u00f3n de s\u00edmbolos gr\u00e1ficos, iconos y fuentes que se utilizan en proyectos web. Los sitios web y el software son los lugares m\u00e1s frecuentes donde los ver\u00e1s y utilizar\u00e1s. Algunos ejemplos son el icono de inicio, el icono de perfil, el icono de inicio de sesi\u00f3n y otros iconos de la misma naturaleza. \n<\/p>\n\n

\n Los glifos funcionan de la misma forma que los documentos con hiperv\u00ednculos, con la \u00fanica diferencia de que se ponen iconos en lugar de palabras. He aqu\u00ed los usos m\u00e1s t\u00edpicos de los glifos, as\u00ed como las razones por las que los moderadores los emplean: \n<\/p>\n\n

1. Para comprender mejor el proyecto web<\/em><\/strong>\n<\/h2>\n\n

\n Los iconos gr\u00e1ficos se utilizan para ayudar a las personas a identificar diversos temas d\u00e1ndoles pistas visuales. Precisamente por eso, los iconos de cada plataforma son id\u00e9nticos entre s\u00ed. De este modo, las personas se sentir\u00e1n m\u00e1s c\u00f3modas con el proyecto y lo comprender\u00e1n mejor. \n<\/p>\n\n

2. Para facilitar la navegaci\u00f3n y la redirecci\u00f3n.<\/em><\/strong>\n<\/h2>\n\n

\n Es posible navegar por un proyecto web con mayor facilidad, ya que los glifos contienen enlaces personalizados a sus respectivas identidades (por ejemplo, al hacer clic en el icono de Inicio se redirigir\u00e1 a los espectadores a la p\u00e1gina de inicio). De este modo, la gente no se desorientar\u00e1 al intentar localizar una p\u00e1gina concreta. Adem\u00e1s, simplifica la navegaci\u00f3n de un sitio web a otro. \n<\/p>\n\n

3. Para una apariencia m\u00e1s aut\u00e9ntica y eficaz<\/em><\/strong>\n<\/h2>\n\n

\n Los iconos no s\u00f3lo cumplen su funci\u00f3n, sino que tambi\u00e9n mejoran el aspecto general de un proyecto web. En un sentido t\u00e9cnico, los iconos aportan autenticidad a un sitio web o a un programa inform\u00e1tico. \n<\/p>\n\n

4. Para facilitar la identificaci\u00f3n<\/em><\/strong>\n<\/h2>\n\n

\n Identificar las funciones de cada mando puede ser dif\u00edcil de descifrar si no hay s\u00edmbolos o iconos que te ayuden. El uso de gr\u00e1ficos como los glifos, por ejemplo, mejora de forma natural la claridad y el reconocimiento de las secuencias de comandos. Para ilustrar la p\u00e1gina de inicio, por ejemplo, en lugar de introducir un t\u00e9rmino largo para describirla, puedes poner simplemente una ilustraci\u00f3n de la misma. \n<\/p>\n\n

C\u00f3mo usar glifos en CSS con Bootstrap<\/strong>\n<\/h2>\n\n

\n Bootstrap es la forma m\u00e1s com\u00fan y sencilla de aplicar glyphicons en proyectos web. Los Conjuntos de Glyphicons Halfling contienen la mayor\u00eda de los iconos que todo sitio web necesita. Por lo tanto, utilizar Bootstrap no supone ning\u00fan esfuerzo, ya que s\u00f3lo necesitas identificar la informaci\u00f3n de clase que implica tu HTML. \n<\/p>\n\n

Para especificar iconos dentro de tu HTML, puedes utilizar esta demanda:<\/em>\n<\/p>\n\n

\n