Trucsweb.com

Trucsweb.com

CSS

Images SVG

RDFFav

CSS - Pictogrammes en police vectoriels

Du vieux .ico au nouveau pictogramme vectoriel gratuitement.Font Awesome, Glyphicons, Material Icons, Elusive Icons, Ionicons,font,bootstrapCSS - Pictogrammes en police vectoriels

Police de pictogrammes

Je me souviens avoir acheté une superbe librairie de pictogramme en couleur, en plusieurs grandeurs, classées par thème. Le tout envoyé sur une cinquantaine de CD dans une belle petite boite en carton joliment décorée à la main. Tellement bucolique, relent de la belle époque des freak’s du fait à la main. Mais à prix fort, plus de 800 USD$ à l’époque! C’était au début du Web, au balbutiement du CSS alors que la transparence n’existait qu’avec le vieux GIF (bizarrement redécouvert par les médias sociaux 15 ans plus tard).

Le pictogramme est un langage en soi. À la manière d’un hiéroglyphe, un pictogramme permet de décrire en une seule image un concept, une action. Ils peuvent aussi être retournés, pivotés, redimensionnés, bordés, inversés et colorés. De plus, si le pictogramme est international peu importe la langue, la normalisation des pictogrammes sur le Web est très ergonomique. Une loupe pour la recherche, ou les trois lignes verticales pour ouvrir un menu caché. Parfois, c’est selon la culture, ainsi le pictogramme de la syndication RSS est devenu logiquement celui d’une connexion sans fil. Malheureusement, j’avais beau demander aux graphistes de faire des pictogrammes personnalisés, je n’en ai jamais trouvé qu’un seul capable d’en faire. Ce n’est pas donné à tout le monde de schématiser un mot, une action ou autres information, dans un petit symbole de 16 par 16 pixels ou 32, 64, etc. Avec un GIF ou le vieux .ico s’était bien pire, quoique le « favicon » des Trucsweb soit encore un bon vieux .ico tout à fait acceptable. On trouve d’ailleurs aujourd’hui des « favicons » modernes beaucoup mois défini! Enfin, les PNG de la librairie m’ont bien servi, puis se fut le tour des « sprites » jusqu’à ce que le web arrive à maturité avec le merveilleux monde du SVG.

Polices de pictogrammes

Les polices de pictogrammes contiennent des symboles et des glyphes au lieu des lettres et chiffres conventionnel. Une fois que vous avez chargé la police, vous pouvez utiliser n’importe lequel de ses pictogrammes en utilisant le nom de classe du pictogramme en question. Vous pouvez également appliquer différentes couleurs, les animer ou les redimensionner à l’aide des propriétés CSS ou encore les manipuler en JavaScript. Il existe plusieurs librairies de pictogrammes gratuites. Vous pouvez créer vous-même vos pictogrammes, mais il existe aujourd’hui plusieurs librairies professionnelles totalement gratuites dont les plus connus sont :

Font Awesome

La version 5 offre une librairie, de plus de 1553 pictogrammes vectorielles, entièrement gratuite, tant pour un usage personnel que commercial. Et plus de 7700 pictogrammes vectorielles dans sa version professionnelle. À l’origine, ils ont été développés pour Bootstrap.

Glyphicons Bootstrap

Abandonnée depuis la version 4 de Bootstrap, il s’agit d’une librairie de pictogrammes monochromes disponibles dans une matrice, en format vectoriel et sous forme de polices. Il fournit plus de 250 glyphes tout à fait gratuitement.

Pictogrammes matérielles de Google

Google fournit environ 750 pictogrammes conçus dans le cadre des « material designed guidelines » (directives de conception matérielle), connus sous le nom « Material Design icons ». Ces pictogrammes sont des symboles simples, magnifiquement conçus. À utiliser dans tous vos projets numériques, tant Android, iOS que Web. Étant donné que ces pictogrammes sont vectoriels, ils sont également évolutifs.

Bootstrap Icons Nouveauté - Décembre 2019
Bootstrap n’inclut plus la librairie de pictogrammes Glyphicons depuis la version 4, se contentant de conseiller fortement les librairies Font Awesome, Feather ou Octicons. Mais à peine un an plus tard, Bootstrap offre sa propre solution, soit Bootstrap Icons
Utiliser une librairie

Dans la plupart des cas, vous pouvez utiliser ces pictogrammes dans votre feuille de styles CSS en chargeant la libraire à partir d’un serveur distant. Sachez toute fois, que bien qu’une librairie partagée soit en principe déjà dans la mémoire cache du navigateur, enfin on l’espère, elles demandent souvent plus de ressources et de temps à charger :

<head>
  ...
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head>

Ou pour un chargement plus rapide, téléchargez la librairie localement sur votre serveur, c’est-à-dire les fichiers : .eot, .woff, woff2 et .ttf. Puis dans votre feuille de style :

<style>
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* Pour IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

/* Base du pictogrammes CSS */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Grandeur de pictogramme idéale */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased; /* Navigateurs WebKit */
  text-rendering: optimizeLegibility; /* Navigateurs Safari et Chrome */
  -moz-osx-font-smoothing: grayscale; /* Navigateurs Firefox */
  font-feature-settings: 'liga'; /* Vieux navigateurs IE */
}
</style>

/* HTML */
<i class="material-icons">face</i>
Changer la couleur et les dimensions
<style>
/* Règles de dimensionnement des pictogrammes. */
.material-icons.picto-petit { font-size: 18px; }
.material-icons.picto-gros { font-size: 48px; }

/* Règles d'utilisation des pictogrammes en noir sur fond clair. */
.material-icons.picto-fonce { color: rgba(0, 0, 0, 0.54); }

/* Règles d'utilisation des pictogrammes en blanc sur fond sombre. */
.material-icons.picto-pale { color: rgba(255, 255, 255, 1); }
</style>

<i class="material-icons picto-gros picto-fonce">face</i>
Librairies
Références
Outils
, Analyste programmeurConception oznogco multimédia (https://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    10/10 sur 1 revues.
           Visites : 8403 - Pages vues : 8492
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @