Slide 1
Slide 1 text
Woop woop assassin de la police
François-Xavier Lair
Slide 2
Slide 2 text
@lair_net
mastodon.top/@lair_net
François-Xavier Lair
Slide 3
Slide 3 text
Les polices d'icônes
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Retour vers le futur
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Les sprites d'images
© Alsacréation
Slide 10
Slide 10 text
2013 : Les polices d'icônes
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Les polices d'icônes
• Un seul fichier à charger
• Images vectorielles
• Changement de taille et de couleur en CSS
.icon-error:before {
content: "\e974";
}
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Problèmes de style
Flash of Unstyled Content (FOUC)
Slide 15
Slide 15 text
Problèmes de style
Flash of Unstyled Content (FOUC)
@font-face {
font-family: 'iconotheque';
src: url('iconotheque.woff2') format('woff2'),
font-weight: normal;
font-style: normal;
font-display:block
}
Slide 16
Slide 16 text
Problèmes de style
Une police d'icône... c'est du texte
• font-size
• letter-spacing
• line-height
Slide 17
Slide 17 text
Problèmes d'accessibilité
Slide 18
Slide 18 text
Les glyphs peuvent être prononcées par les lecteurs d'écrans
Slide 19
Slide 19 text
Utilisations de balises syntaxiques incorrectes
“L'élément HTML représente un morceau de
texte qui se différencie du texte principal. Cela
peut par exemple être le cas pour des termes
techniques, des phrases dans une langue
étrangère ou encore l'expression des pensées
d'un personnage. Le contenu de cet élément est
généralement affiché en italique.”
— mdn web docs
Slide 20
Slide 20 text
Fix (icônes de décoration)
Slide 21
Slide 21 text
Icônes de décoration
Une offre neutre en CO2
Une offre équilibrée
Un Service client efficace et réactif
Accueil
Favoris
Espace client
Panier
Slide 22
Slide 22 text
Icônes porteuses d'information
Slide 23
Slide 23 text
Icônes porteuses d'information
Espace client
.visually-hidden{
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
Slide 25
Slide 25 text
Problèmes de poids
Slide 26
Slide 26 text
Material icons setup (Variable font)
Slide 27
Slide 27 text
Material icons setup (Variable font)
Slide 28
Slide 28 text
Inclusion de Font Awesome (Web font)
Slide 29
Slide 29 text
Inclusion de Font Awesome (Web font)
Slide 30
Slide 30 text
Inclusion de Font Awesome (SVG ?)
Slide 31
Slide 31 text
Inclusion de Font Awesome (SVG ?)
Ne vous fiez jamais aux dépendances
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Material : 3061 icônes
Font Awesome : 1390 icônes
Slide 35
Slide 35 text
Problèmes de maintenance
Gérer manuellement ses polices de Glyph
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
I SVG
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
SVG via une balise img
Slide 42
Slide 42 text
SVG "inline"
Ne pas oublier le aria-hidden="true" et le focusable="false"
Slide 43
Slide 43 text
SVG "inline" avec des classes
...
.buble { fill: #ebcb00;}
.glass--right { fill: #ffe500;}
.glass--left { fill: #fff48c;}
© Vincent Le Moign
Slide 44
Slide 44 text
SVG "inline" avec des classes
...
.buble { fill: #ebcb00;}
.glass--right { fill: #ffe500;}
.glass--left { fill: #fff48c;}
© Vincent Le Moign
Slide 45
Slide 45 text
SVG "inline" avec des classes
...
.buble { fill: #ebcb00;}
.glass--right { fill: #ffe500;}
.glass--left { fill: #fff48c;}
© Vincent Le Moign
Slide 46
Slide 46 text
SVG "inline" avec currentColor
Valider
Valider
button:hover {
color: darkgreen;
}
.current-exemple svg {
fill: currentColor;
}
Slide 47
Slide 47 text
SVG Sprite
...
Slide 48
Slide 48 text
SVG via CSS
Slide 49
Slide 49 text
En CSS avec SVG externe
Valider
Valider
.button-svg-external__check::before {
content: url("/img/glyphs/fontawesome/local/svgs/solid/check.svg");
}
Slide 50
Slide 50 text
En CSS avec SVG "inline"
Valider
Valider
.button-svg-inline__check::before {
content: url('data:image/svg+xml,
Slide 51
Slide 51 text
En CSS avec SVG externe et mask-image
Valider
Valider
.button-svg-mask__check::before {
content: "";
-webkit-mask-image: url("fontawesome/local/svgs/solid/check.svg");
mask-image: url("fontawesome/local/svgs/solid/check.svg");
background-color: currentColor;
}
Slide 52
Slide 52 text
En CSS avec SVG externe, mask-image et des custom properties
Valider
Valider
:root{
--glyph-check:url('fontawesome/local/svgs/solid/check.svg');
--glyph-cart:url('fontawesome/local/svgs/solid/cart.svg');
--glyph-cancel:url('fontawesome/local/svgs/solid/cancel.svg');
--glyph-circle:url('fontawesome/local/svgs/solid/circle.svg');
(...)
}
(...)
.button-svg-mask__check::before {
content: "";
-webkit-mask-image: var(--glyph-check);
mask-image: var(--glyph-check);
background-color: currentColor;
}
Slide 53
Slide 53 text
Avant de se quitter...
• N'oubliez pas d'optimiser vos SVG
Slide 54
Slide 54 text
Feedbacks : Slides :
@lair_net
mastodon.top/@lair_net
François-Xavier Lair