[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 !

A voir également:

Awesome javascript
Font awesome pro - Meilleures réponses
Font awesome content code - Meilleures réponses
Integré une image via variable ✓ - Forum - PHP
Des styles de liens différents dans un XML via css ? ✓ - Forum - Flash
Integrer image arriere plan dans menu CSS ✓ - Forum - Javascript / DHTML
Appliquer une mise en forme à un texte via CSS ✓ - Forum - Flash
Integrer du CSS dans un site dejà finit.. ✓ - Forum - Javascript / DHTML

1 réponse

Réponse 1 / 1

@karamel

Messages postés: 1807
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 5 mai 2022

144
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 !

Votre réponse