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

Résolu

Krustiz Messages postés 63 Date d'inscription dimanche 3 décembre 2017 Statut Membre Dernière intervention 16 mars 2020 - 23 févr. 2019 à 11:02
Krustiz Messages postés 63 Date d'inscription dimanche 3 décembre 2017 Statut Membre Dernière intervention 16 mars 2020 - 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 !

1 réponse

Réponse 1 / 1

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
25 févr. 2019 à 20:28

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

Krustiz Messages postés 63 Date d'inscription dimanche 3 décembre 2017 Statut Membre Dernière intervention 16 mars 2020
26 févr. 2019 à 11:14

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 63 Date d'inscription dimanche 3 décembre 2017 Statut Membre Dernière intervention 16 mars 2020
26 févr. 2019 à 11:45

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 63 Date d'inscription dimanche 3 décembre 2017 Statut Membre Dernière intervention 16 mars 2020
26 févr. 2019 à 14:53

C'est bon c'est réglé, merci de l'aide !

Discussions similaires

Autocad LT et VBA

Multi-Lights OpenGL

Remplacer Font Awesome par Line Awesome

interface graphique en visual studio avec vb

Votre réponse

Discussions similaires