Share
Estoy seguro de que muchos de ustedes que crean temas de WordPress han necesitado iconos. Los íconos son una excelente manera de agregar visualmente un significado a un botón o publicación relacionada con etiquetas o enlaces permanentes. Una fuente de icono es una excelente manera de agregar fácilmente un conjunto de iconos a su tema en lugar de tener que crearlos usted mismo.
Hay bastantes fuentes de iconos geniales por ahí. Si está utilizando Bootstrap para su tema, tiene incorporada la fuente del icono de Glyphicons. Para este post, me centraré en uno de los más populares: Font Awesome.
Claro, hay otras formas de agregar íconos a tu tema, pero quiero hablar sobre algunos de los beneficios de usar una fuente de íconos en lugar de imágenes, sprites, etc..
El primer beneficio (y creo que el mejor) es que es una fuente. Esto significa que obtiene todos los beneficios del estilo que obtiene con el texto regular. Puede cambiar fácilmente el color y el tamaño de un icono con un poco de CSS. También se renderizará tan nítido como su dispositivo lo permita. Es decir, no hay que preocuparse por crear gráficos listos para retina.
Dado que todos los íconos están incluidos en un archivo de fuente, eso significa que solo es una solicitud HTTP para cargar. Esto realmente puede darle un poco de rendimiento de carga de página si está utilizando una serie de iconos. También puede incluir el CSS necesario para representar los iconos con todos los demás .css archivos que carga para su tema.
Hay varias formas de agregar Fuentes impresionantes a tu tema. Han documentado un par de maneras diferentes sobre cómo agregar a su sitio web en su página de inicio.
Probablemente, la forma más fácil de agregar Font Awesome a tu tema es usar BootstrapCDN. Todo lo que necesita hacer es agregar lo siguiente a la en tus temas header.php expediente:
O, mejor aún, use el wp_enqueue_style función.
Otra forma de agregar a su tema sería desplegar el Proyecto Font Awesome GitHub y agregarlo a la raíz de su tema. A continuación, deberá poner en cola la fuente utilizando wp_enqueue_style función.
Una forma avanzada es usar Sass o LESS, dependiendo de lo que esté usando en el proyecto de su tema. Usted querría agregar el fuente impresionante carpeta en la raíz de su proyecto, entonces tendrá que hacer algunas ediciones.
Abre tu proyecto fuente-impresionante / menos / variables.less o font-awesome / scss / _variables.scss y editar el @ fa-font-path o $ fa-font-path Variable para apuntar a su directorio de fuentes como tal:
$ fa-font-path: "fuentes";
Deberá volver a compilar el preprocesador de CSS de su proyecto para recoger los cambios..
Si está familiarizado con el uso de Bower, hay otra forma avanzada. Usted usaría los archivos en el bower_components / font-awesome Carpeta durante tus tareas de compilación en lugar de agregarlas a tu proyecto.
Necesitarías instalar Font Awesome ejecutando Bower instalar fuente impresionante --save Y eso lo agregaría a tu proyecto. Bower.json expediente. Entonces necesitarías que los archivos Sass o LESS de tu tema apunten a los archivos apropiados para construir tu .css expediente. También es posible que desee utilizar la tarea grunt-contrib-copy para copiar las fuentes en su propia carpeta en su proyecto.
Puedes ver cómo hacer esto en mi proyecto de ejemplo.
Una vez que haya agregado Font Awesome a su tema, puede comenzar a usarlos en su tema. Cada tema es obviamente diferente, pero voy a mostrar algunos ejemplos de cosas que podrían ser relativamente universales para la mayoría de los temas..
Font Awesome viene con una serie de populares redes sociales e íconos de marcas. La mayoría de las veces, un ícono social es un enlace, por lo que podemos agregar la clase de íconos a la etiqueta de anclaje como así,
Puede ver un ejemplo de cómo agregar varios íconos en el footer.php archivo en mi proyecto de ejemplo aquí.
Otro gran lugar para usar íconos es en los metadatos de tus publicaciones, como mencioné anteriormente. Los tres que agregué en el proyecto de ejemplo son el enlace de comentarios, las etiquetas y el enlace permanente..
Aquí hay ejemplos para cada uno:
Añadir Nuevo ',' estándar '), __ (' 1 ',' estándar '), __ (' % ',' estándar '), ","); ?>
Accentsconagua
'. __ ('% 1 $ s', 'tuts-font-awesome'). '', $ tag_list); ?> ">
Puedes ver todos estos ejemplos en mi proyecto de ejemplo loop.php archiva aquí.
El último ejemplo son los enlaces de post paginación. Me gusta agregar chevrones delante de "Older" y antes de "Newer". Si está utilizando el next_posts_link y enlaces_post anteriores en su proyecto, deseará agregar un intervalo con la clase apropiada como:
Más antiguo ',' tuts-font-awesome ')); ?>',' tuts-font-awesome ')); ?>Puedes ver todos estos ejemplos en mi proyecto de ejemplo pagination.php archiva aquí.
Ahora debería tener todo para comenzar con Font Awesome en su tema de WordPress. Di un par de ejemplos en los que me he encontrado usando iconos con frecuencia. Hay mucho más asombroso en Font Awesome que puedes probar, como apilar, rotar e iconos animados. Yo sugeriría que eche un vistazo a la página de ejemplos de fuentes asombrosas para ver todo lo increíble.
