UVIC - UCC
Web
Web
  • Inici
  • Nocions bàsiques d'HTML
    • Colors
  • Nocions bàsiques del web
  • Contingut
    • Text
    • Taules
    • Imatges i documents
    • Formularis
  • Components
    • Desplegables
    • Caixes de contacte
    • Pestanyes
    • Cartes (cards)
    • Marcs
    • Botons
    • Alertes
    • Icones
    • Carousel
  • Disposició
    • Columnes
  • Accessibilitat
    • Imatges
    • Enllaços
Con tecnología de GitBook
En esta página
  • Paleta icones
  • Modificacions
  1. Components

Icones

Afegeix icones com qualsevol altre caràcter.

AnteriorAlertesSiguienteCarousel

Última actualización hace 5 años

El web de la UVic té la tipografia d'icones . Aquests icones són tractades com a caràcters, és a dir, el navegador les utilitza com si fossin una lletra.

Per inserir una icona, cal que vagis al codi font de la pàgina i, al punt en el qual vulguis mostrar la icona, afegir-hi un codi com el següent:

<i class="fas fa-ambulance"></i>

Paleta icones

Per aconseguir l'HTML de la icona només cal que:

  • Cliquis la icona que vols afegir a la pàgina des de la galeria (compte que no tots són d'ús gratuït).

  • Localitzis l'estructura de tipus <i class="fas fa-address-book"></i> i la copiïs.

Modificacions

A les icones els pots aplicar diferents transformacions. Aquí només comentarem les mes senzilles:

Color

Per canviar el color de la icona, cal que recordis que les icones són caràcters de text i, per tant, es mostraran del mateix color que pertoca al text.

  • La classe és "text-" seguit del codi que has trobat al pas anterior.

  • Afegeix la classe de color a la icona.

Per exemple, per mostrar la icona de l'ambulància amb el color primari:

<i class="text-primary fas fa-ambulance"></i>

Dimensions

Per canviar les dimensions d'una icona cal que hi afegeixis una de les classes següents:

  • fa-xs

  • fa-sm

  • fa-lg

  • fa-2x

  • fa-3x

  • fa-5x

  • fa-7x

  • fa-10

Per veure totes les icones disponibles i les seves classes corresponents, ves a la .

Així que, per canviar el color de la icona, has de seguir el mateix procés que per :

Mira el nom del color que vulguis que tingui la icona a la .

Trobaràs més opcions i possibilitats a la pàgina oficial de .

galeria oficial de FontAwesome
FontAwesome
FontAwesome
canviar el color del text
paleta de colors del web
Exemples d'icones que hi ha disponibles