css - tutorial - foundation email outlook
¿Cómo configuro los iconos de la Fundación Zurb? (4)
He descargado los archivos de fuentes del icono Zurb Foundation http://zurb.com/playground/foundation-icon-fonts-3
Los descomprimí y coloqué la carpeta / foundation-icons en mi carpeta / css. ¿Es esto correcto? Intento seguir la sección "Cómo usarlos" de la documentación y no puedo averiguar cómo empezar a usar las clases.
Estoy haciendo esto en mi .html para llamar a las clases.
<a class=".fi-social-facebook">Facebook</a>
así que asumo que debo de no configurado / configurar mi fuente de archivo correctamente.
Actualización : así es como se ve mi directorio ... Me estoy refiriendo a él
Y así es como estoy llamando a la clase.
<i class="ft-social-facebook"></i><a href="#">Facebook</a>
<i class="ft-star"></i>
La forma correcta es <i class="fi-star"></i> lugar de <i class="ft-star"></i>
Lo instalé a través de pip install django-zurb-foundation y pip install django-zurb-foundation el mismo problema …/foundation/icons funcionó, pero no pude consultarlos en mi proyecto real. Lo que terminó trabajando para mí es agregar lo siguiente a la base.html mi proyecto
{% load foundation_tags %}
{% block css %}
{% foundation_css ''foundation-icons'' %}
{% endblock css %}
Que es efectivamente la misma que la respuesta de ManelMusti , pero manejada en la plantilla usando la misma técnica que el ejemplo en …/site_packages/foundation/templates/foundation/icons.html
Los iconos de la fundación usan las etiquetas <i> . Entonces tendrías algo como <i class="fi-social-facebook"></i><a href="http://facebook.com">Facebook</a> .
En el archivo zip que descargó, hay un archivo preview.html. Ábrelo en tu editor y échale un vistazo. Tendrá un poco más de sentido.
Además, su archivo CSS no incluye tamaños. Entonces, cuando usas sus ejemplos para cambiar el tamaño (por ejemplo, <i class="fi-calendar size-24"></i> ), nada cambiará. Al mirar su archivo preview.html, tenían esos tamaños definidos en el encabezado. Así que los copié, los puse en mi CSS y resolví el problema. Aquí están si quieres usarlos:
.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }
Una vez que hayas descargado el paquete, debes agregarlo a tu <head> :
<link rel="stylesheet" href="css/foundation-icons.css" />
Y asegúrese de que la carpeta svgs dentro de su carpeta css , y el resto de archivos dentro de su carpeta css también.
Cuando termine esta configuración, intente esto en su html:
<i class="fi-star"></i>
Debería imprimir una estrella.
La solución más rápida, no requiere instalación:
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
Otras versiones disponibles en https://cdnjs.com/libraries/foundicons