Balises HTML + CSS


i comme italique

Les anciens développeurs de sites en HTML4 se souviennent de ces balises de mise en forme.
Il suffisait de placer du texte entre la balise ouvrante <i> et la balise fermante </i> pour obtenir une écriture en italique.
Idem pour les balises <b> en gras, <u> en souligné.
Certaines comme la balise u n' est pas dépréciée avec HTML5
Mais il est préférable, voire indispensable, maintenant en HTML5, d' attribuer du style (CSS)

  Différence écriture italique et oblique

avec HTML5

Les feuilles de style ont pris une place prépondérante dans la mise en forme du texte. Si vous construisez un site mobile ou responsive, elles seront indispensables. De plus, vous obtiendrez des résultats plus précis, et identiques dans tous les navigateurs.
Essayez tant que possible d' utiliser l' attribut class" plutôt que du "style-inline", avec une page CSS séparée (external). C' est plus long à mettre en œuvre, mais vos pages seront plus légères donc plus rapides à se recharger

i comme icône

Une mission inattendue a été confiée aux balises i :
Celle de permettre d' insérer des fontes en forme d' icônes
( Il est possible d' utiliser les balises span à la place des balises i )

   Ceci n' est pas une image

Ceci est une fonte iconique représentant une image. Elle a toutes les propriétés des caractères alphanumériques Unicode

Code HTML <i class="fa fa-picture fa-3x"></i> Code CSS (mise en forme)

.fa-3x {
    font-size: 3em;
}
.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-size-adjust: none;
    font-stretch: normal;
    font-feature-settings: normal;
    font-language-override: normal;
    font-kerning: auto;
    font-synthesis: weight style;
    font-variant: normal;

Cette icône provient de Font Awesome The iconic font and CSS toolkit

  The Icons

  Ceci n' est pas une image

C' est une fonte de 525icons.com avec un peu de style

CODE HTML <i class="ux ux-5x ico-image-gallery2 shadow2" style=color:red ></i>

Les fontes iconiques

On les trouve souvent dans un paquet zippé contenant les CSS et les polices d' icônes. Ce sera à vous de décompresser ce ZIP et télécharger les fichiers obtenus dans un même dossier.
C' est la méthode que j' ai utilisé pour certaines icônes de Runestro (525icons) dans cette page. Vous trouverez dans le lien ci-dessous les CSS et les polices téléchargeables séparemment:

Il faut simplement faire un lien vers les fichiers CSS dont vous avez besoin, dans la partie HEAD de vos pages

Dans mon cas les liens nécessaires étaient:

<link rel="stylesheet"  href="http://wubijacq.com/fonts/525icons.css">	
<link rel="stylesheet"  href="http://wubijacq.com/fonts/style.css">

525icons v.1.3.0 by @ runestro

  Fichiers 525icons dernière version

  All icons de 525icons

Mais utiliser un CDN est plus pratique

Les CDNs

Les content delivery network (CDN) sont des réseaux d' ordinateurs reliés entre-eux qui délivrent des données et du contenu à des utilisateurs.
Ils sont là pour vous simplifier la vie. Vous n' aurez plus que un seul lien (css) à placer dans la partie HEAD de vos pages et aucun fichier à transférer sur le web.
Pour installer les icônes de Font Awesome, j' ai utilisé le lien fourni par

  BootstrapCDN

Pour installer les icônes de 525icons vous avez

  CDN.Jsdelivr

Si vous utilisez un CDN pour installer vos icônes, il faut impérativement commencer par le préfixe

Plus simple pour foundicons:
  FoundationCDN (CSS principale)
fi-[icon] pour foundation icons de ZURB,exemple:
<i class="fi-widget"></i> Paramètres =

Paramètres

Paramètres


Téléchargés à wubijacq.com

Les DEBs XnViewMP-linux et les MSI IsoRecorder et Gpick sont actuellement les logiciels les plus demandés sur wubijacq.com


Annonce Google

wubijacq.com utilise FlexNav v06

  Plugin FlexNav v06

Téléchargements:
Sites préférés de wubijacq.com
Sites de confiance Diffuseurs douteux