Bootstrap es uno de los marcos de trabajo de interfaz más populares desarrollado originalmente por Twitter. El objetivo principal del marco es crear sitios web móviles fáciles de usar utilizando componentes reutilizables. Inicialmente, Bootstrap ofrecía Glyphicons, luego usaba Font Awesome y ahora ofrece su propio conjunto de íconos llamados Bootstrap Icons. Puede usar iconos de Bootstrap en cualquiera de sus sitios web, incluidos los sitios de WordPress. Lo bueno es que no tiene que usar el marco CSS y JS base para usar los íconos. En este artículo explicaremos cómo usar los íconos de Bootstrap en los sitios de WordPress. Si desea obtener más información sobre Bootstrap, consulte nuestros tutoriales de Bootstrap 5.
Iconos de arranque
Hasta hace unos años, Font Awesome era tan popular que casi todos los desarrolladores y propietarios de sitios web la usaban. Esto se desarrolló originalmente para su uso con Bootstrap, que fue esencialmente reemplazado por el conjunto de iconos gratuito de Bootstrap. Puede usar los íconos de Bootstrap de dos maneras en cada proyecto: SVG y fuentes web. En caso de que SVG no funcione en su sitio de WordPress, puede usar la opción de fuentes web.
El uso de iconos en WordPress implica dos pasos:
- CSS para vincular íconos en el encabezado
- Incrustar HTML en el contenido
Conecte los íconos CSS de Bootstrap a WordPress
Aunque puede descargar y alojar íconos en su servidor, la forma más fácil es usar su conexión CDN. Aquí está el enlace CDN más reciente para los iconos de Bootstrap:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">Debe insertar este enlace en la sección de encabezados de su sitio de WordPress. Hay muchos complementos gratuitos para insertar enlaces CSS en el encabezado, como Insertar encabezados y pies de página de AprenderWP. Sin embargo, este complemento no ofrece ningún control sobre la inserción de un enlace de algunas páginas. De forma predeterminada, cargará el archivo CSS en todo su sitio en el encabezado. Es posible que esto no sea necesario cuando desea usar íconos solo en algunas publicaciones o páginas. En este caso, puede usar el administrador de código en el complemento de pie de página, que explicaremos en este artículo.
- Inicie sesión en su panel de administración de WordPress y vaya a la sección "Complementos> Agregar nuevo".
- Busque "código de encabezado" para encontrar Administrador de código de pie de página enchufar.
- Haga clic en el botón "Instalar" y en el botón "Activar" para comenzar a usar el complemento en su sitio.
Después de activar el complemento, agregará un nuevo elemento de la barra de menú llamado HFCM. Pase el cursor sobre el menú HFCM y seleccione la opción "Agregar nuevo". Verá dos secciones: una para controlar el fragmento y luego el campo para pegar el código real. Complete los siguientes datos en la primera sección:
- Nombre del fragmento: ingrese un nombre para su fragmento como íconos de Bootstrap.
- Tipo de fragmento: seleccione CSS en el menú desplegable.
- Mostrar sitio: aquí seleccione la opción "Todo el sitio" para insertar CSS en todo su sitio. De lo contrario, elija una de las opciones disponibles, como publicaciones específicas, páginas, categorías, etiquetas, página de inicio, etc. Verá opciones adicionales según su elección. Por ejemplo, al seleccionar publicaciones específicas se mostrará un menú desplegable "Lista de publicaciones" para seleccionar sus publicaciones. Puede seleccionar publicaciones únicas o múltiples en las que desea mostrar iconos. Si desea utilizar todo el sitio, es posible desactivar la carga de CSS en ciertas publicaciones y páginas seleccionándolas de la lista de exclusión.
- Ubicación: seleccione una opción de título.
- Visualización del dispositivo: seleccione la opción "Mostrar a todos los dispositivos". Si es necesario, puede elegir solo en una computadora de escritorio o teléfono móvil.
- Estado: seleccione la opción "Activo".
Después de completar todos los datos, coloque el enlace CDN en la sección "Fragmento / código".
Haga clic en el botón "Guardar" para aplicar sus cambios.
Insertar HTML para iconos
Una vez que haya insertado CSS en la sección del encabezado, el siguiente paso es incrustar HTML para sus íconos. Al igual que los íconos de Font Awesome, cada ícono de Bootstrap también tiene un punto de código y un nombre de clase CSS. Puedes ver la página de iconos para obtener la lista completa de nombres de clase CSS para todos sus íconos favoritos. Todo lo que necesita hacer es incrustar el código HTML con el nombre de clase de icono CSS correcto utilizando un bloque HTML personalizado. Puede usar SVG o fuentes web ya que el CSS conectado desde CDN permite ambas opciones.
Uso de fuentes web
Esta es la opción más sencilla, ya que solo necesita saber el nombre de la clase CSS de su icono. Por ejemplo, a continuación se muestra el formato de inserción de fuente del icono de WhatsApp.
<i class="bi bi-whatsapp"></i>Puede cambiar el tamaño y el color agregando CSS incorporado, como se muestra a continuación:
<i class="bi bi-whatsapp" style="font-size: 5rem; color: blue;"></i>Simplemente puede pegar este código en un bloque HTML personalizado.
Publique su publicación y el icono tendrá el siguiente aspecto cuando vea la publicación.
Puede agregar íconos adicionales en el mismo bloque HTML personalizado para mostrar la lista completa de íconos sociales, como el widget. Si desea agregar hipervínculos a sus íconos, simplemente envuelva los íconos con etiquetas HTML pin. También puede usar para agregar un espacio entre los íconos A continuación se muestra el código para el widget social con íconos en Facebook, Twitter, YouTube.
<a href="https://www.facebook.com/"> <i class="bi bi-facebook" style="font-size: 5rem; color: blue;"></i> </a>
<a href="https://twitter.com/"> <i class="bi bi-twitter" style="font-size: 5rem; color: lightblue;"></i> </a>
<a href="https://www.yourtube.com/"> <i class="bi bi-youtube" style="font-size: 5rem; color: red;"></i> </a>
Aparecerá a continuación en la publicación publicada.
Uso de iconos SVG
Para usar el formato SVG, debe obtener SVG para iconos y clase CSS. Puede obtener esto haciendo clic en el ícono en la página de íconos de Bootstrap y copiando el código en la sección "Copiar HTML", como se muestra a continuación.
El SVG tendrá el siguiente formato y, de forma predeterminada, el tamaño del icono se controla mediante las propiedades de ancho/alto.
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>Puede cambiar el tamaño y agregar un color personalizado usando el atributo de color CSS, como se muestra a continuación.
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16" style="color: blue;">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>
Ahora puede incrustar este código en HTML personalizado en su sitio de WordPress. Puede hacer clic en la vista previa para ver el icono o publicar la publicación para ver el icono en la página activa.
Ultimas palabras
Debido a que los íconos de Bootstrap son de código abierto y están disponibles de forma gratuita, puede usarlos para embellecer su contenido de WordPress. Le recomendamos que utilice la opción de fuente web, que solo necesita el nombre de la clase CSS para los iconos. Sin embargo, puede usar SVG si es conveniente para usted. Tenga en cuenta que si ya usa un tema de WordPress basado en Bootstrap, el enlace del icono CSS debe ser parte de su tema y no necesita insertarlo usando un complemento.
Deja una respuesta