homefinance blog
¿Le gustaría agregar fuentes de iconos a su sitio de WordPress? Recientemente, uno de nuestros lectores preguntó cuál es la forma más fácil de agregar fuentes de iconos a su tema de WordPress. Las fuentes de iconos le permiten agregar iconos vectoriales (cambio de tamaño) sin ralentizar el sitio web. Se cargan como fuentes web y se pueden estilizar con CSS. En este artículo, le mostraremos cómo agregar fácilmente fuentes de iconos a su WordPress, paso a paso.
¿Qué son las fuentes de iconos y por qué deberías usarlas? Las fuentes de icono contienen símbolos o iconos en lugar de letras y números. Estos íconos se pueden agregar fácilmente al contenido del sitio web y cambiar el tamaño de CSS. En comparación con los íconos basados en imágenes, los iconos de fuentes son mucho más rápidos, lo que ayuda a la velocidad general del sitio web de WordPress.
Las fuentes de icono se pueden usar para mostrar iconos comúnmente utilizados. Por ejemplo, puede usarlos con carrito de compras, descargar botones, cajas de funciones, competencia de regalos e incluso en menús de navegación de WordPress. Hay varias fuentes de iconos gratuitos y de código abierto disponibles que tienen cientos de hermosos íconos. De hecho, cada instalación de WordPress viene con el conjunto de fuentes de iconos de Dashicons gratuitos. Estos íconos se utilizan en el menú de administración de WordPress y en otras áreas del área de administración de WordPress. Algunas otras fuentes de iconos populares son:
Fuente impresionante
Genericones
Icomoon
Linealiconi
Iconos de material de Google
El proyecto sustantivo
En aras de este tutorial, usaremos Font Awesome. Es la fuente de icono gratuita más popular y el código abierto. Utilizamos FontaWesher en el sitio web de WPBeginner, así como nuestros complementos de WordPress como OptinMonster, WPForms, RafflePress, etc. En esta guía, cubriremos tres formas de agregar fuentes de iconos a WordPress. Puede elegir la solución que funcione mejor para usted. Agregar fuentes de iconos de WordPress usando complementos si es un usuario principiante que solo trata de agregar algunos iconos a sus publicaciones o páginas, entonces este método es adecuado para usted. Tiene que cambiar el Archivos de archivos y puede usar fuentes de iconos en todas partes en su sitio web. Lo primero que debe hacer es instalar y activar el increíble complemento de fuentes. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Después de la activación, el complemento permite la impresionante asistencia de fuente para su tema. Ahora puede editar cualquier publicación o página de WordPress y usar el icono corto de la siguiente manera: [icon name = “cohete”] puede usar este código corto con otro texto o solo en un solo bloque de código corto dedicado.
Una vez agregado, puede obtener una vista previa de la publicación o la página para ver cómo se verá el icono en un sitio en vivo. Así es como se mostró en nuestro sitio de prueba.
También puede agregar el código corto del icono de fuente en un solo bloque de párrafo, donde puede usar la configuración del bloque para aumentar el tamaño del icono.
A medida que aumenta el tamaño del texto, esto puede parecer extraño en el editor de texto. Esto se debe a que ShortCode no se convierte automáticamente en una fuente de icono en el editor de bloques. Deberá hacer clic en el botón Vista previa en su publicación o página para ver qué se ve el tamaño real del icono. También puede usar el icono de código corto dentro de las columnas y puede crear características como esta:
2. Usando las fuentes de iconos con un constructor de páginas de WordPress, los complementos más populares para el generador de páginas de WordPress vienen con soporte integrado para fuentes de iconos. Esto le permite usar fácilmente fuentes de iconos en sus páginas de destino, así como en otras áreas de su sitio web. Beaver Builder Beaver Builder es el mejor complemento de WordPress para el generador de mercado. Le permite crear fácilmente modelos de página personalizados en WordPress sin escribir ningún código. Beaver Builder viene con hermosos iconos y módulos listos para usar que puede tirar y arreglar en la publicación y las páginas.
Puede crear grupos de iconos, agregar un solo icono y moverlos a filas y columnas bien posicionadas. También puede seleccionar sus propios colores, fondo, espacio y borde sin escribir CSS.
Incluso puede crear temas de WordPress totalmente personalizados sin escribir ningún código usando Themer Beaver Builder. Elementor Pro El Elementor es otro complemento popular para el generador de páginas de WordPress. También viene con varios elementos que le permiten usar fuentes de iconos, incluido un elemento de icono.
Puede simplemente deslizar y arreglar un icono en cualquier lugar y usarlo con filas, columnas y tablas para crear páginas hermosas. Allers de páginas populares como Divi y Visual Composer también tienen soporte completo para las fuentes de iconos. 3. Agregar fuentes de iconos en WordPress manual con código como mencioné anteriormente, que las fuentes de iconos son solo fuentes y se pueden agregar a su sitio. A medida que agrega cualquier fuente personalizada. Algunas fuentes de iconos, como Font Awesome, están disponibles en los servidores CDN en la web y se pueden conectar directamente desde su tema de WordPress. También puede cargar todo el directorio de fuentes en una carpeta en su tema de WordPress y luego usar estas fuentes en la hoja de estilo.
Debido a que usamos Font Awesome para este tutorial, le mostraremos cómo puede agregarlo utilizando ambos métodos. Método 1: Este método manual es bastante fácil. En primer lugar, debe visitar el sitio web Font Awesome e ingresar su correo electrónico para obtener el código de incorporación.
Ahora marque su casilla de correo electrónico para recibir un correo electrónico de Font Awesome con su código de incorporación. Copie y pegue este código de incorporación en el archivo de encabezado.php de su tema de WordPress justo antes de la etiqueta . Su código de incorporación será una sola línea que se hará cargo de la biblioteca Font Awesome directamente de sus servidores CDN. Se verá así:
Este método es el más simple, pero puede causar conflictos con otros complementos. Un mejor enfoque sería la carga correcta de JavaScript en WordPress utilizando el mecanismo de conexión incorporado. En lugar de conectar la hoja de estilo a la plantilla de encabezado de su base, puede agregar el siguiente código a las funciones.php de su base o en un complemento específico del sitio.
wp_enqueue_script (‘wpb-fa’, ‘https://use.fontawesome.com/123456abc.js’, array (), ‘1.0.0’, true);
}
add_action (‘wp_enqueue_scripts’, ‘wpb_load_fa’);
Método 2:
El segundo método no es el más fácil, pero le permitirá alojar la fuente de fuente impresionante en su propio sitio web. En primer lugar, debe visitar el sitio web Font Awesome para descargar el paquete de fuentes en su computadora.
Simplemente descargue las fuentes del icono y descomprima el paquete. Ahora deberá iniciar sesión en su alojamiento de WordPress usando un cliente FTP y acceder a su tema de WordPress. Tienes que crear una nueva carpeta allí y llamarla fuentes. Luego debe cargar el contenido de la carpeta con fuentes de iconos en el directorio de fuentes en su servidor web.
Ahora está listo para cargar fuentes de iconos en su tema de WordPress. Simplemente agregue este código al archivo Functions.php de su base o en un complemento específico para el Sitio.
Función wpb_load_fa () {
wp_enqueue_style (‘wpb-fa’, get_stylesheet_directory_uri (). ‘/fonts/css/font-weom.min.css’);
}
add_action (‘wp_enqueue_scripts’, ‘wpb_load_fa’);
Has subido con éxito la fuente impresionante en tu tema de WordPress. Ahora viene la parte donde agregará íconos reales a su tema, publicaciones o páginas de WordPress. Visualización manual de fuentes de iconos en WordPress Vaya al sitio web Font Awesome para ver la lista completa de iconos disponibles. Haga clic en cualquier icono que desee usar y podrá ver el nombre del icono. Cure el nombre del icono y úselo en WordPress.
Puede estilizar este icono en la hoja de estilo de su tema de la siguiente manera: .fa-arrow-tal-circle-up {
Tamaño de fuente: 50px;
Color:#FF6600;
}
También puede combinar diferentes iconos juntos y estilizarlos simultáneamente. Por ejemplo, suponga que desea mostrar una lista de enlaces de iconos junto a ellos. Puede envolverlos bajo un elemento
con una determinada clase.
home
biblioteca
aplicaciones
configuraciones
Ahora puede estilizarlos en la hoja de estilo de su tema de la siguiente manera: .icons-group-weite i {
Color: #333;
Tamaño de fuente: 50px;
}
.icons-group-weitem i: hover {
Color: #FF6600
}
