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

Messages postés
41
Date d'inscription
dimanche 3 décembre 2017
Dernière intervention
26 février 2019
- - Dernière réponse : Krustiz
Messages postés
41
Date d'inscription
dimanche 3 décembre 2017
Dernière intervention
26 février 2019
- 26 févr. 2019 à 14:53
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 

Votre réponse

1 réponse

Meilleure réponse
Messages postés
1672
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
19 mars 2019
35
1
Merci
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

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CodeS-SourceS

Codes Sources 120 internautes nous ont dit merci ce mois-ci

Krustiz
Messages postés
41
Date d'inscription
dimanche 3 décembre 2017
Dernière intervention
26 février 2019
-
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"); }
Krustiz
Messages postés
41
Date d'inscription
dimanche 3 décembre 2017
Dernière intervention
26 février 2019
-
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 ?
Krustiz
Messages postés
41
Date d'inscription
dimanche 3 décembre 2017
Dernière intervention
26 février 2019
-
C'est bon c'est réglé, merci de l'aide !
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.