Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


La semaine dernière, nous avons publié un pack 100 icônes en forme de ligne. Aujourd’hui, nous publions exactement ces symboles sous la forme d’une police de symboles en 100 parties ainsi qu’un tutoriel détaillé sur leur utilisation. Les polices d’icônes sont parfaites pour leur évolutivité sur les écrans haute résolution et peuvent être traitées et conçues comme du texte. Vous trouverez ci-dessous les étapes à suivre pour intégrer et utiliser des polices d’icônes sur votre propre site Web. Notez que les polices d’icônes ne fonctionnent pas dans certains navigateurs Windows Mobile.

Téléchargez le pack de polices

Incorporer une police de symbole

1. Téléchargez la police de symbole souhaitée.

Dans ce tutoriel, nous utiliserons les fichiers du téléchargement ci-dessus, qui contiennent une police de symboles créée avec icomoon.
Vous pouvez également télécharger et utiliser le nôtre Police d’icônes élégantes si vous le souhaitez.

2. Copiez le code de « style.css » et collez-le dans votre propre fichier « style.css ».

Ce fichier CSS incorpore la police de symbole via @ font-face et a une classe unique pour chaque symbole qui indique le caractère à utiliser dans la police. Un style unique peut également être ajouté à chaque symbole ici.

Nous recommandons toujours d’utiliser un sous-sujet pour cela. Vous trouverez de plus amples informations sur les sous-thèmes dans notre Tutoriel sur les sous-thèmes.

3. Copiez le dossier « Polices » dans votre répertoire sujet:

/ wp-content / topics / votre sujet /

Si votre répertoire de rubriques contient déjà un dossier Polices, faites glisser le contenu de Polices dans le dossier existant.

Répertoire des polices

Utiliser une police de symboles

1. Si vous utilisez WordPress, cela ne fonctionnera pas avec l’éditeur de texte visuel. Vous souhaiterez peut-être désactiver l’éditeur visuel, ou il est possible que tout votre code soit supprimé après l’avoir enregistré. Vous pouvez le faire sous Utilisateurs> Votre profil

disable-visual-editor

2. Vous pouvez maintenant insérer ces symboles dans n’importe quelle zone de texte B. un article, une page ou un widget avec deux méthodes différentes.

HTML
<!-- Use the following if you want to use class selectors-->
<span class="icon-phone"></span>

<!-- Use the following if you want to use data attributes.-->
<span data-icon="&#xe004"></span>

Les résultats sont visuellement identiques, mais nous allons utiliser la méthode de classe afin de pouvoir facilement formater les symboles en utilisant du CSS externe.

Exemples de style et de mise en œuvre

Les instructions et exemples suivants décrivent certaines des différentes façons dont vous pouvez utiliser la police d’icônes sur votre site Web. Encore une fois, nous allons utiliser la méthode du nom de classe et styliser la police avec du CSS externe.

1. Placement en ligne des symboles

Vous pouvez insérer un symbole dans n’importe quel corps de texte. Vous pouvez également formater le symbole comme vous le souhaitez en modifiant le CSS que vous avez mis dans style.css à l’étape 1. Voici un exemple d’icône utilisée sur un en-tête de thème Divi.

Symbole en ligne

Pour ce faire, collez ce HTML dans un module de texte Divi (ou n’importe quelle zone de texte dans n’importe quel sujet) et le CSS suivant dans votre fichier style.css (ou boîte CSS personnalisée dans ePanel si vous utilisez un thème élégant). La chose la plus importante sur laquelle se concentrer ici est la première ligne de HTML où j’ai mis l’icône et les lignes CSS qui définissaient la taille et la couleur de l’icône.

HTML

<span class="icon-tools-2"></span>
<h1>Advanced Drag & Drop Builder</h1>
Combining our various modules, you can build just about anything.
CSS

.icon-tools-2:before {
	content: "e034";
	font-size: 64px;
	color: #318EC3;
}

2. Ajouter une icône aux étiquettes de navigation

Une police d’icônes est un excellent moyen d’ajouter une icône à vos éléments de navigation pour ajouter un petit plus aux titres de vos pages. Voici un exemple du sujet agile.

Symboles d'étiquette de navigation

Dans l’éditeur de menu, vous pouvez ajouter une plage de symboles au début de votre étiquette de navigation pour obtenir cet effet. Vous pouvez également utiliser un seul symbole pour une étiquette de navigation, comme le symbole RSS dans l’exemple ci-dessus. Cela pourrait être un moyen intéressant d’ajouter des liens vers des icônes de médias sociaux à votre navigation.

Étiquette de navigation d'icône

3. Utilisation de symboles comme hyperliens

Comme il s’agit d’une police, tout ce que vous pouvez faire avec du texte normal peut être appliqué à une police de symboles. Voici un exemple d’icône utilisée comme lien. De plus, j’ai ajouté un état de lévitation qui rend l’icône semi-transparente. Découvrez-le ci-dessous!

Pour ce faire, collez ce code HTML dans un champ de texte et le CSS suivant dans votre fichier style.css (ou un champ CSS personnalisé dans ePanel).

HTML
<a href="https://www.elegantthemes.com"><span class="icon-download"></span></a>
DOWNLOAD
CSS
.icon-download:before {
	content: "e04d";
	font-size: 64px;
	color: #318EC3
}

.icon-download:hover:before {
	opacity:0.5;
}

4. Concevez plusieurs symboles en même temps

Plusieurs symboles peuvent être ciblés en même temps en ajoutant une classe unique à un groupe de symboles. Un bon exemple de ceci est l’ajout d’icônes au début des éléments de liste. Si nous voulons donner le même style à tous ces symboles, nous pouvons leur attribuer une classe supplémentaire pour obtenir un tel effet.

Enveloppe Lorem Ipsum
Mobile Lorem Ipsum
Conférencier Lorem Ipsum
Chat lorem ipsum
Genius Lorem Ipsum

Pour y parvenir, j’ai donné à chaque symbole une classe de « listes de symboles » et défini quelques styles CSS pour un alignement optimal.

HTML
<span class="icon-envelope icon-list"></span> Envelope Lorem Ipsum
<br>
<span class="icon-mobile icon-list"></span> Mobile Lorem Ipsum
<br>
<span class="icon-megaphone icon-list"></span> Speaker Lorem Ipsum
<br>
<span class="icon-chat icon-list"></span> Chat Lorem Ipsum
<br>
<span class="icon-genius icon-list"></span> Genius Lorem Ipsum
CSS
.icon-list{
	width: 25px;
	text-align: center; 
	color: #AD1EB9;
}

5. Concevez vos symboles avec des animations CSS.

Avec l’animation CSS, vous pouvez faire des choses vraiment intéressantes avec les polices d’icônes. Puisqu’il s’agit de graphiques vectoriels, la qualité des symboles n’est pas affectée par les animations. Voici quelques exemples de ce qui peut être fait.

Les animations ci-dessus sont entièrement contrôlées par les propriétés CSS définies ci-dessous.

HTML
<span class="icon-heart pulse"></span>
<span class="icon-dial tick"></span>
<span class="icon-happy sway"></span>
CSS
/* Pulsing Heart Icon */
.pulse {
    -webkit-animation: pulse 4s infinite;
    -moz-animation: pulse 4s infinite;
    -o-animation: pulse 4s infinite;
    animation: pulse 4s infinite;
}
 

@-moz-keyframes pulse {
      0% {-moz-transform: scale(0.9, 0.9); opacity: 0.0;}
     50% {opacity: 1.0;}
    100% {-moz-transform: scale(1, 1); opacity: 0.0;}
}

@-webkit-keyframes pulse {
      0% {-webkit-transform: scale(0.9, 0.9); opacity: 0.0;}
     50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1, 1); opacity: 0.0;}
}

@keyframes pulse {
      0% {scale: (0.9, 0.9); opacity: 0.0;}
     50% {opacity: 1.0;}
    100% {scale: (1, 1); opacity: 0.0;}
}

/* Ticking Dial Icon */
.tick {
    -webkit-animation: tick steps(4) 2s infinite normal;
    -moz-animation: tick steps(4) 2s infinite normal;
    -o-animation: tick steps(4) 2s infinite normal;
    animation: tick steps(4) 2s infinite normal;
}

@-moz-keyframes tick { 100% { -moz-transform: rotate(360deg); } }

@-webkit-keyframes tick { 100% { -webkit-transform: rotate(360deg); } }

@keyframes tick { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 
/* Swaying Happy-Face Icon */
.sway {
    -webkit-animation: sway 3s ease-in-out infinite alternate;
    -moz-animation: sway 3s ease-in-out infinite alternate;
    -o-animation: sway 3s ease-in-out infinite alternate;
    animation: sway 3s ease-in-out infinite alternate;
}
 
@-moz-keyframes sway {
      0% { -moz-transform: rotate(-15deg); }
    100% { -moz-transform: rotate(15deg); }
}
 
@-webkit-keyframes sway {
      0% { -webkit-transform: rotate(-15deg); }
    100% { -webkit-transform: rotate(15deg); }
}
 
@-o-keyframes sway {
      0% { -o-transform: rotate(-15deg); }
    100% { -o-transform: rotate(15deg); }
}
 
@-ms-keyframes sway {
      0% { -ms-transform: rotate(-15deg); }
    100% { -ms-transform: rotate(15deg); }
}
 
@keyframes sway {
      0% { transform: rotate(-15deg); }
    100% { transform: rotate(15deg); }
}

6. Combinez plusieurs symboles

Une grande limitation des polices de symboles est qu’elles utilisent des éléments SVG pour créer les symboles qui ne prennent pas en charge la transparence ou prennent en charge plusieurs couleurs. Une façon de contourner ce problème consiste à placer des symboles directement les uns sur les autres et à concevoir chaque symbole comme vous le souhaitez.

Pour obtenir cet effet, j’ai empilé deux symboles en les positionnant de manière absolue et en les centrant. Vous trouverez ci-dessous le HTML et le CSS utilisés pour créer cette démo.

HTML
<span class="icon-laptop stacked"></span><span class="icon-cloud stacked"></span>
CSS
.stacked {
	position: absolute; 
	text-align: center; 
	width: 84px;
}

.icon-laptop{
	font-size:64px; 
	color:#BBB
}

.icon-cloud {
	font-size:32px; 
	line-height:58px; 
	color:#318EC3
}

Utilisation des polices d’icônes dans les applications de bureau

iconfont-photoshop

Les polices d’icônes sont également compatibles avec les applications de bureau. C’est idéal si vous souhaitez utiliser des icônes dans les maquettes de votre site Web. Suivez les étapes ci-dessous lorsque la police est disponible au format .ttf.

1. Téléchargez la version .ttf de la police sur votre ordinateur. Si vous êtes un Mac, double-cliquez sur le fichier .ttf et vous serez invité à le télécharger dans votre répertoire de polices. Si vous êtes sur un ordinateur Windows et que le double-clic sur le fichier .ttf ne fonctionne pas, vous devrez placer le fichier .ttf dans votre dossier Polices dans le Panneau de configuration.

2. Créez un champ de texte dans l’application de bureau dans laquelle vous travaillez et choisissez votre police de symbole dans le menu Polices.

3. Si les symboles ont reçu des caractères latins, par exemple, vous pouvez taper «a» et le caractère affecté à «a» sera affiché. Cependant, de nombreuses polices de symboles attribuent des Unicodes à chaque caractère (c’est-à-dire U + e000). Pour taper ceci sur un clavier, vous devrez maintenir la touche Alt enfoncée (option sur un Mac) pendant que vous tapez les quatre chiffres après U +. Pour entrer un caractère en utilisant Unicode U + e000, maintenez la touche Alt enfoncée et entrez e000. Remarque: sur un Mac, vous devez activer la saisie hexadécimale Unicode dans les paramètres du clavier.

Cette police avec Icônes élégantes utilise des unicodes. Nous vous avons fourni les codes HTML (c’est-à-dire & # xe000). Les quatre chiffres qui suivent & # x dans les codes hmtl sont les mêmes quatre derniers chiffres dont vous avez besoin pour entrer Unicodes (s’il n’y a que deux chiffres après & # x, entrez 00 avant les deux chiffres).

Pour encore plus de commodité, pour la police que nous publions aujourd’hui, nous avons fourni une liste de tous les symboles, leur nom de classe et leur code HTML ci-dessous. Vous pouvez simplement copier et coller une icône dans votre application de bureau.

Icônes ET-Line Noms de classe et Unicodes

.icon-mobile [&#xe000;]

ordinateur portable .icon [&#xe001;]

.icon-desktop [&#xe002;]

.icon-tablet [&#xe003;]

.icon-phone [&#xe004;]

.icon-document [&#xe005;]

Documents .icon [&#xe006;]

recherche .icon [&#xe007;]

Presse-papiers .icon [&#xe008;]

journal .icon [&#xe009;]

.icon-notebook [&#xe00a;]

.icon-book-open [&#xe00b;]

Navigateur .icon [&#xe00c;]

calendrier .icon [&#xe00d;]

présentation .icon [&#xe00e;]

image .icon [&#xe00f;]

Images .icon [&#xe01;]

.icon-vidéo [&#xe011;]

caméra .icon [&#xe012;]

imprimante .icon [&#xe013;]

.icon-toolbox [&#xe014;]

mallette .icon [&#xe015;]

portefeuille .icon [&#xe016;]

cadeau .icon [&#xe017;]

.icon-bargraph [&#xe018;]

.icon-grid [&#xe019;]

.icon-expand [&#xe01a;]

focus .icon [&#xe01b;]

.icon-edit [&#xe01c;]

Ajustements .icon [&#xe01d;]

.icon-ruban [&#xe01e;]

sablier .icon [&#xe01f;]

.icon-lock [&#xe020;]

mégaphone .icon [&#xe021;]

bouclier .icon [&#xe022;]

trophée .icon [&#xe023;]

.icon-flag [&#xe024;]

.icon-map [&#xe025;]

puzzle .icon [&#xe026;]

panier .icon [&#xe027;]

enveloppe .icon [&#xe028;]

panneau de signalisation .icon [&#xe029;]

télescope .icon [&#xe02a;]

engrenages .icon [&#xe02b;]

.icon-key [&#xe02c;]

trombone .icon [&#xe02d;]

pièce jointe .icon [&#xe02e;]

.icon-pricetags [&#xe02f;]

ampoule .icon [&#xe030;]

couches .icon [&#xe031;]

crayon .icon [&#xe032;]

.icon-tools [&#xe033;]

.icon-tools-2 [&#xe034;]

ciseaux .icon [&#xe035;]

brosse .icon [&#xe036;]

loupe .icon [&#xe037;]

boussole circulaire .icon [&#xe038;]

.icon-linegraph [&#xe039;]

.icon-mic [&#xe03a;]

Stratégie .icon [&#xe03b;]

.icon-mug [&#xe03c;]

Attention .icon [&#xe03d;]

.icon-recycle [&#xe03e;]

ancre .icon [&#xe03f;]

.icon-profile-male [&#xe040;]

.icon-profile-femelle [&#xe041;]

vélo .icon [&#xe042;]

vin .icon [&#xe043;]

.icon-hotairballoon [&#xe044;]

.icon-glob [&#xe045;]

génie .icon [&#xe046;]

.icon-map-pin [&#xe047;]

.icon-dial [&#xe048;]

.icon-chat [&#xe049;]

.icon-coeur [&#xe04a;]

.icon-cloud [&#xe04b;]

Téléchargement .icon [&#xe04c;]

.icon-download [&#xe04d;]

.icon-usure [&#xe04e;]

.icon-dangereux [&#xe04f;]

.icon-morceau [&#xe050;]

compteur de vitesse .icon [&#xe051;]

.icon-global [&#xe052;]

boussole .icon [&#xe053;]

.icon bouée de sauvetage [&#xe054;]

horloge .icon [&#xe055;]

ouverture .icon [&#xe056;]

citation .icon [&#xe057;]

.icon-scope [&#xe058;]

réveil .icon [&#xe059;]

.icon-refresh [&#xe05a;]

.icon-happy [&#xe05b;]

.icon-triste [&#xe05c;]

.icon-facebook [&#xe05d;]

.icon-twitter [&#xe05e;]

.icon-googleplus [&#xe05f;]

.icon-rss [&#xe060;]

.icon-tumblr [&#xe061;]

.icon-linkedin [&#xe062;]

.icon-dribbble [&#xe063;]

Ce ne sont là que quelques actions que vous pouvez effectuer avec les polices d’icônes. J’espère que cet article vous a donné les outils dont vous avez besoin pour utiliser sur vos propres sites Web et peut-être même créer votre propre police d’icônes!





Source link

Recent Posts