1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

[Font Awesome] Intégration via un content en CSS (local) [Résolu]

Signaler
Messages postés
63
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
16 mars 2020
 -
Messages postés
63
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
16 mars 2020
 -
Hello,
J'ai retrouvé la version 5 de Font Awesome PRO sur mon ordinateur, et j'aimerais bien pouvoir m'en servir...

Le dossier se présente comme ça :



J'ai fait le lien avec le fichier all.css, et ça marche (en l'intégrant avec une balise i)
Et je cherche à l'intégrer à un bouton dynamique CSS trouvé sur le web qui utilise justement la propriété content... 

.button {
	display: inline-block;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.15);
	border: none;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	font-size: 28px;
	width: 30%;
	height: 70px;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
}

.button span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
}

.button span:after {
	font-family: "Font Awesome 5 Pro"; /* L'icone s'insère ici */
	content: '\f07a';
	color: white;
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}

.button:hover span {
	padding-right: 25px;
}

.button:hover span:after {
	opacity: 1;
	right: 0;
}


<button class="button" style="vertical-align:middle" type="submit"><span>Acheter </span></button>


J'ai jamais trop touché à font awesome de cette façon, et je suis un peu perdu à vrai dire...

Merci d'avance !
Afficher la suite
A voir également:

1 réponse

Réponse 1 / 1
Messages postés
1767
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
31 août 2020
 87
bonjour

les navigateurs utilises les police du systeme d'exploitation il faut soit installer la police dans l'os soit utiliser dans le css @font-face qui permet d'importer une police
Signaler
Messages postés
63
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
16 mars 2020
Salut,
Déjà présent dans le fichier all.css (Font Awesome) : 

@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
Signaler
Messages postés
63
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
16 mars 2020
Ok je suis complètement con !!
J'ai oublié de faire le lien avec les différents fichiers CSS light, brand, solid, regular...

Cependant, il me reste un dernier petit problème, je trouve que l'icone est un peu trop près du texte, et impossible d'y remédier avec un padding/margin, une idée ?
Signaler
Messages postés
63
Date d'inscription
dimanche 3 décembre 2017
Statut
Membre
Dernière intervention
16 mars 2020
C'est bon c'est réglé, merci de l'aide !
Répondre Posez votre question