La semana pasada lanzamos un paquete de 100 íconos de estilo de línea . Hoy estamos lanzando esos íconos exactos en forma de una fuente de íconos de 100 piezas junto con un extenso tutorial sobre cómo usarlos. Las fuentes de iconos son excelentes por su escalabilidad en pantallas de alta resolución y se pueden tratar y diseñar exactamente como texto. A continuación se muestran los pasos para incrustar y utilizar fuentes de iconos en su propio sitio web. Tenga en cuenta que las fuentes de iconos no funcionan en algunos navegadores móviles de Windows.
Descargar el paquete de fuentes
1. Descargue la fuente del icono que desea utilizar.
En este tutorial, usaremos los archivos de la descarga anterior, que contiene una fuente de icono creada con icomoon .
También puede descargar y utilizar nuestra fuente de iconos elegantes si lo desea.
2. Copie el código de «style.css» y péguelo en su propio archivo «style.css».
Este archivo css incrusta la fuente del icono a través de @font-face y tiene una clase única para cada icono, que le indica qué carácter de la fuente debe usar. Aquí también es donde se puede agregar un estilo único a cada ícono.
Siempre recomendamos usar un tema hijo para esto. Para obtener más información sobre temas secundarios, consulte nuestro Tutorial de temas secundarios .
3. Copie la carpeta «fuentes» en su directorio de temas:
/wp-content/themes/tutema/
Si su directorio de temas ya tiene una carpeta de «fuentes», arrastre el contenido de «fuentes» a la carpeta existente.
Uso de una fuente de icono
1. Si está utilizando WordPress, esto no funcionará con el editor de texto visual. Deberá deshabilitar el editor visual o existe la posibilidad de que todo su código se elimine después de guardar. Puedes hacerlo en Usuarios > Tu perfil
2. Ahora puede insertar estos íconos en cualquier área de texto, como una publicación, una página o un widget, utilizando dos métodos diferentes.
|
01
02
03
04
05
06
|
HTML<!-- Use the following if you want to use class selectors--><span class="icon-phone"></span><!-- Use the following if you want to use data attributes.--><span data-icon=""></span> |
Los resultados son visualmente los mismos, pero usaremos el método de clase para que podamos diseñar fácilmente los íconos usando CSS externo.
Ejemplos de estilo e implementación
Las instrucciones y los ejemplos a continuación cubren algunas de las diferentes formas en que puede usar una fuente de icono en su sitio web. Nuevamente, usaremos el método de nombre de clase y diseñaremos la fuente con CSS externo.
1. Colocación de iconos en línea
Puede agregar un icono dentro de cualquier cuerpo de texto. También puede diseñar el ícono como desee editando el css que pegó en style.css en el Paso 1. Aquí hay un ejemplo de un ícono que se usa sobre el encabezado de un tema Divi .
Para lograr esto, pegue este html en un módulo de texto Divi (o cualquier campo de texto en cualquier tema) y el siguiente css en su archivo style.css (o cuadro css personalizado en ePanel si está usando un tema elegante) . Lo principal en lo que hay que centrarse aquí es la primera línea de HTML donde inserté el icono, y las líneas de CSS utilizadas para definir el tamaño y el color del icono.
|
01
02
03
04
05
|
HTML<span class="icon-tools-2"></span><h1>Advanced Drag & Drop Builder</h1>Combining our various modules, you can build just about anything. |
|
01
02
03
04
05
06
07
|
CSS.icon-tools-2:before { content: "e034"; font-size: 64px; color: #318EC3;} |
Usando una fuente de ícono, puede agregar un ícono a sus elementos de navegación para darle a los títulos de sus páginas algo extra. A continuación se muestra un ejemplo que utiliza el tema Nimble.
En el Editor de menús, puede agregar un intervalo de iconos al comienzo de su etiqueta de navegación para lograr este efecto. También puede usar solo un ícono para una etiqueta de navegación como el ícono de RSS en el ejemplo anterior. Esta podría ser una manera genial de agregar enlaces de íconos de redes sociales a su navegación.
3. Uso de iconos como hipervínculos
Debido a que se trata de una fuente, cualquier cosa que pueda hacer con el texto tradicional se puede aplicar a una fuente de icono. Este es un ejemplo de un icono que se utiliza como enlace. Además, también agregué un estado de desplazamiento que hace que el icono sea semitransparente. ¡Pruébalo a continuación!
DESCARGAR
Para lograr esto, pegue este html en un campo de texto y el siguiente css en su archivo style.css (o cuadro css personalizado en ePanel).
|
01
02
03
|
HTML<a href="https://www.elegantthemes.com"><span class="icon-download"></span></a>DOWNLOAD |
|
01
02
03
04
05
06
07
08
09
10
|
CSS.icon-download:before { content: "e04d"; font-size: 64px; color: #318EC3}.icon-download:hover:before { opacity:0.5;} |
4. Dar estilo a varios íconos a la vez
Al agregar una clase única a un grupo de íconos, podemos apuntar a múltiples íconos a la vez. Un buen ejemplo de esto es agregar íconos al comienzo de los elementos de la lista. Si queremos dar a todos estos íconos el mismo estilo, podemos asignarles una clase adicional para obtener un efecto como este.
Móvil Lorem Ipsum
Orador Lorem Ipsum
Charla Lorem Ipsum
Genio Lorem Ipsum
Para lograr esto, le di a cada ícono una clase de «lista de íconos» y definí algunos estilos css para una alineación óptima.
|
01
02
03
04
05
06
07
08
09
10
|
HTML<span class="icon-envelope icon-list"></span> Envelope Lorem Ipsum<br><span class="icon-mobile icon-list"></span> Mobile Lorem Ipsum<br><span class="icon-megaphone icon-list"></span> Speaker Lorem Ipsum<br><span class="icon-chat icon-list"></span> Chat Lorem Ipsum<br><span class="icon-genius icon-list"></span> Genius Lorem Ipsum |
|
01
02
03
04
05
06
|
CSS.icon-list{ width: 25px; text-align: center; color: #AD1EB9;} |
5. Dale estilo a tus íconos con animaciones CSS.
Puedes hacer algunas cosas realmente interesantes con las fuentes de los íconos usando animaciones CSS , y debido a que son gráficos vectoriales, las animaciones no degradarán la calidad de los íconos. A continuación se muestran algunos ejemplos de lo que se puede hacer.
Las animaciones anteriores están completamente controladas por las propiedades CSS definidas a continuación.
|
01
02
03
04
|
HTML<span class="icon-heart pulse"></span><span class="icon-dial tick"></span><span class="icon-happy sway"></span> |
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
|
CSS/* Pulsing Heart Icon */.pulse { -webkit-animation: pulse 4s infinite; -moz-animation: pulse 4s infinite; -o-animation: pulse 4s infinite; animation: pulse 4s infinite;} @-moz-keyframes pulse { 0% {-moz-transform: scale(0.9, 0.9); opacity: 0.0;} 50% {opacity: 1.0;} 100% {-moz-transform: scale(1, 1); opacity: 0.0;}}@-webkit-keyframes pulse { 0% {-webkit-transform: scale(0.9, 0.9); opacity: 0.0;} 50% {opacity: 1.0;} 100% {-webkit-transform: scale(1, 1); opacity: 0.0;}}@keyframes pulse { 0% {scale: (0.9, 0.9); opacity: 0.0;} 50% {opacity: 1.0;} 100% {scale: (1, 1); opacity: 0.0;}}/* Ticking Dial Icon */.tick { -webkit-animation: tick steps(4) 2s infinite normal; -moz-animation: tick steps(4) 2s infinite normal; -o-animation: tick steps(4) 2s infinite normal; animation: tick steps(4) 2s infinite normal;}@-moz-keyframes tick { 100% { -moz-transform: rotate(360deg); } }@-webkit-keyframes tick { 100% { -webkit-transform: rotate(360deg); } }@keyframes tick { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } /* Swaying Happy-Face Icon */.sway { -webkit-animation: sway 3s ease-in-out infinite alternate; -moz-animation: sway 3s ease-in-out infinite alternate; -o-animation: sway 3s ease-in-out infinite alternate; animation: sway 3s ease-in-out infinite alternate;} @-moz-keyframes sway { 0% { -moz-transform: rotate(-15deg); } 100% { -moz-transform: rotate(15deg); }} @-webkit-keyframes sway { 0% { -webkit-transform: rotate(-15deg); } 100% { -webkit-transform: rotate(15deg); }} @-o-keyframes sway { 0% { -o-transform: rotate(-15deg); } 100% { -o-transform: rotate(15deg); }} @-ms-keyframes sway { 0% { -ms-transform: rotate(-15deg); } 100% { -ms-transform: rotate(15deg); }} @keyframes sway { 0% { transform: rotate(-15deg); } 100% { transform: rotate(15deg); }} |
6. Combinación de múltiples íconos
Una gran limitación de las fuentes de íconos es que utilizan activos SVG para crear los íconos, que no admiten transparencias ni colores múltiples. Una forma de evitar esto es colocar íconos directamente uno encima del otro y diseñar cada ícono como desee.
Para lograr este efecto, he apilado dos íconos dándoles un posicionamiento absoluto y alineándolos al centro. A continuación se muestra el HTML y el CSS utilizados para crear esta demostración.
|
01
02
|
HTML<span class="icon-laptop stacked"></span><span class="icon-cloud stacked"></span> |
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
|
CSS.stacked { position: absolute; text-align: center; width: 84px;}.icon-laptop{ font-size:64px; color:#BBB}.icon-cloud { font-size:32px; line-height:58px; color:#318EC3} |
Uso de fuentes de iconos en aplicaciones de escritorio
Las fuentes de iconos también son compatibles con las aplicaciones de escritorio. Esto es excelente si desea usar íconos en las maquetas de su sitio web. Siempre que la fuente esté disponible en formato .ttf, siga los pasos a continuación.
1. Descargue la versión .ttf de la fuente a su computadora. Si tiene una Mac, haga doble clic en el archivo .ttf y se le pedirá que lo descargue en su directorio de fuentes. Si está en una máquina con Windows, si hacer doble clic en el archivo .ttf no funciona, deberá colocar el archivo .ttf en la carpeta ‘Fuentes’ que se encuentra en el Panel de control.
2. Cree un cuadro de texto en cualquier aplicación de escritorio en la que esté trabajando y seleccione la fuente de su icono en el menú de fuentes.
3. Si a los iconos se les asignaron caracteres latinos, podrá escribir ‘a’, por ejemplo, y aparecerá el carácter que se asignó a ‘a’. Sin embargo, muchas fuentes de iconos asignan Unicodes a cada carácter (es decir, U+e000). Para escribir esto en un teclado, deberá mantener presionada la tecla Alt (opción en una Mac) mientras escribe los cuatro dígitos que siguen a U+. Entonces, para escribir un carácter con Unicode U+e000, mantendrá presionada la tecla Alt y escribirá e000. Nota: en una Mac, deberá habilitar la entrada hexadecimal Unicode en la configuración del teclado.
Esta fuente, junto con Elegant Icons, usa Unicodes. Le hemos proporcionado los códigos HTML (es decir, &#x e000 ). Los cuatro dígitos que siguen a &#x en los códigos hmtl son los mismos últimos cuatro dígitos que necesitará para escribir códigos Unicode (si solo hay dos dígitos después de &#x, escriba 00 antes de los dos dígitos).
Para mayor comodidad, para la fuente que lanzamos hoy, proporcionamos una lista de cada ícono, su nombre de clase y su código html a continuación. Simplemente puede copiar un ícono y pegarlo en su aplicación de escritorio.
Íconos de línea ET Nombres de clases y Unicodes
Estas son solo algunas de las cosas que puede hacer con las fuentes de íconos, así que espero que esta publicación le haya brindado las herramientas que necesita para comenzar a usarlas en sus propios sitios web y tal vez incluso crear su propia fuente de íconos.