Aller au contenu
  • Veuillez ne pas poster de message pour but d'insulter, incitation à la haine, propos sexuels et tout autre qui ne respecte pas nos conditions générales !

Installation Font Awesome 5 (local)

Hudson Hornet

Par Hudson Hornet
dans Archivé

 Partager

Messages recommandés

Hudson Hornet

Hudson Hornet 21

Posté(e)
Posté(e)

Coucou,

 

J'ai retrouvé sur mon ordinateur un dossier de la version 5 de Font Awesome (PRO), et j'aimerais bien l'utiliser...

 

Le dossier se présente comme ça :

 

Pour avoir accès à cette image, merci de vous connecter.

 

Et si j'ai bien compris, il faut que je face un lien vers le fichier all.css, et ça marche !

 

Par contre, quand je veux intégrer l'icon dans un content en CSS, ça ne fonctionne pas !

  

<!DOCTYPE html>
<html>
	<head>
		<title>Font Awesome Test</title>
		<meta charset="utf-8" />
		<style type="text/css">
			body {
				background-color: black;
			}
			.icon { /* NE MARCHE PAS !! */
				content: "\f07a";
				color: white;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/all.css">
		<link rel="stylesheet" type="text/css" href="css/fontawesome.css">
		<link href="css/brands.css" rel="stylesheet">
  		<link href="css/solid.css" rel="stylesheet">
  		<link href="css/regular.css" rel="stylesheet">
  		<link href="css/light.css" rel="stylesheet">
	</head>
	<body>
		<h1>Un test avec Font Awesome 5 PRO</h1>
		<i class="far fa-shopping-cart" style="color: white;"></i> <!-- ça marche !! -->
		<span class="icon"></span> <!-- Ne marche pas !! -->
	</body>
</html>

Pour l'icone utilisée c'est elle : 

Pour avoir accès à ce lien, merci de vous connecter.

|---------------------------------------------------------------------------|

Hudson Hornet

Passionné d'informatique

Développement web

 

Un problème ? Tu peux me contacter via le forum ou bien sur discord. Je t'ai aidé ? N'oublie pas le pouce bleu !

 

"Tremblez, tyrans, et vous, perfides, l'opprobre de tous les partis, tremblez ! Vos projets parricides vont enfin recevoir leurs prix !"

|---------------------------------------------------------------------------|

 

Lien à poster
Partager sur d’autres sites
Akushi

Akushi 75

Posté(e)
Posté(e) (modifié) 
.icon {
  	font-family: "Font Awesome 5 Pro";
	content: "\f07a";
	color: white;
}

Tadam magie sa fonctionne... 

 

Ou simplement rajouter fas ou far devant fas / far c'est pour la version PRO.

Modifié par Akushi
Lien à poster
Partager sur d’autres sites
Hudson Hornet

Hudson Hornet 21

Posté(e)
  • Auteur
Posté(e) 
		.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";
			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;
		}

Je vais m'en servir pour faire un bouton dynamique en CSS, et même avec ta soluce ça ne fonctionne pas (.button span:after)

|---------------------------------------------------------------------------|

Hudson Hornet

Passionné d'informatique

Développement web

 

Un problème ? Tu peux me contacter via le forum ou bien sur discord. Je t'ai aidé ? N'oublie pas le pouce bleu !

 

"Tremblez, tyrans, et vous, perfides, l'opprobre de tous les partis, tremblez ! Vos projets parricides vont enfin recevoir leurs prix !"

|---------------------------------------------------------------------------|

 

Lien à poster
Partager sur d’autres sites
Akushi

Akushi 75

Posté(e)
Posté(e)
il y a une heure, Hudson Hornet a dit : 

		.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";
			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;
		}

Je vais m'en servir pour faire un bouton dynamique en CSS, et même avec ta soluce ça ne fonctionne pas (.button span:after)

 

Tout dépend de la version rajoute fas et c'est régler. 

Lien à poster
Partager sur d’autres sites
Hudson Hornet

Hudson Hornet 21

Posté(e)
  • Auteur
Posté(e)

Comme ça ? :  

content: '\ fas f07a';

|---------------------------------------------------------------------------|

Hudson Hornet

Passionné d'informatique

Développement web

 

Un problème ? Tu peux me contacter via le forum ou bien sur discord. Je t'ai aidé ? N'oublie pas le pouce bleu !

 

"Tremblez, tyrans, et vous, perfides, l'opprobre de tous les partis, tremblez ! Vos projets parricides vont enfin recevoir leurs prix !"

|---------------------------------------------------------------------------|

 

Lien à poster
Partager sur d’autres sites
Hudson Hornet

Hudson Hornet 21

Posté(e)
  • Auteur
Posté(e)

Ça ne marche pas... :

  

<button class="far button" style="vertical-align:middle" type="submit"><span>Acheter </span></button>
.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";
	content: '\f07a';
	font-weight: 400;
	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;
}

 

|---------------------------------------------------------------------------|

Hudson Hornet

Passionné d'informatique

Développement web

 

Un problème ? Tu peux me contacter via le forum ou bien sur discord. Je t'ai aidé ? N'oublie pas le pouce bleu !

 

"Tremblez, tyrans, et vous, perfides, l'opprobre de tous les partis, tremblez ! Vos projets parricides vont enfin recevoir leurs prix !"

|---------------------------------------------------------------------------|

 

Lien à poster
Partager sur d’autres sites
Hudson Hornet

Hudson Hornet 21

Posté(e)
  • Auteur
Posté(e)
Il y a 2 heures, Akushi a dit :

FAS pas FAR

Idem ?

|---------------------------------------------------------------------------|

Hudson Hornet

Passionné d'informatique

Développement web

 

Un problème ? Tu peux me contacter via le forum ou bien sur discord. Je t'ai aidé ? N'oublie pas le pouce bleu !

 

"Tremblez, tyrans, et vous, perfides, l'opprobre de tous les partis, tremblez ! Vos projets parricides vont enfin recevoir leurs prix !"

|---------------------------------------------------------------------------|

 

Lien à poster
Partager sur d’autres sites
Hudson Hornet

Hudson Hornet 21

Posté(e)
  • Auteur
Posté(e)
Il y a 5 heures, Kurumi Tokisaki a dit :

Oui meilleur code

sauf le nom de la font c'est en PRO il faut prendre la normal de 5 non en PRO

Donc la font devient : "Font Awesome 5 PRO" ?

Au pire où je peux trouver le nom de la police dans les fichiers ?

|---------------------------------------------------------------------------|

Hudson Hornet

Passionné d'informatique

Développement web

 

Un problème ? Tu peux me contacter via le forum ou bien sur discord. Je t'ai aidé ? N'oublie pas le pouce bleu !

 

"Tremblez, tyrans, et vous, perfides, l'opprobre de tous les partis, tremblez ! Vos projets parricides vont enfin recevoir leurs prix !"

|---------------------------------------------------------------------------|

 

Lien à poster
Partager sur d’autres sites
Hudson Hornet

Hudson Hornet 21

Posté(e)
  • Auteur
Posté(e)

J'ai résolu le problème, merci pour vos indications.

|---------------------------------------------------------------------------|

Hudson Hornet

Passionné d'informatique

Développement web

 

Un problème ? Tu peux me contacter via le forum ou bien sur discord. Je t'ai aidé ? N'oublie pas le pouce bleu !

 

"Tremblez, tyrans, et vous, perfides, l'opprobre de tous les partis, tremblez ! Vos projets parricides vont enfin recevoir leurs prix !"

|---------------------------------------------------------------------------|

 

Lien à poster
Partager sur d’autres sites
  • Administrateur
Narzo

Narzo 759

Posté(e)
  • Administrateur
Posté(e)
    Salut Hudson Hornet ,
    Ton sujet a été déplacé pour une des deux raisons suivantes :

    - Ta demande a été résolue.

    - Ton sujet se trouvait dans la mauvaise catégorie.

        
      Ceci est un message automatique.

《⠀⠀Founder of Inshare.fr⠀》

《⠀⠀Baylife moderator⠀》

《⠀⠀Twitch channel moderator⠀》

《⠀⠀French translator Trucksbook.eu⠀》

𝐹𝑒𝑒𝑙 𝑓𝑟𝑒𝑒 𝑡𝑜 𝑤𝑟𝑖𝑡𝑒 𝑎 𝑐𝑜𝑚𝑚𝑒𝑛𝑡

—————————————————

╱⠀⠀⠀⠀⠀⠀⠀⠀⠀Règlements⠀⠀ //⠀⠀Abonnements⠀⠀ //⠀⠀ Discord   ⠀⠀⠀⠀⠀⠀⠀⠀⠀╲

 

signature.png

Lien à poster
Partager sur d’autres sites
  • Administrateur
Narzo

Narzo 759

Posté(e)
  • Administrateur
Posté(e)
    Salut Hudson Hornet ,
    Ton sujet a été déplacé pour une des deux raisons suivantes :

    - Ta demande a été résolue.

    - Ton sujet se trouvait dans la mauvaise catégorie.

        
      Ceci est un message automatique.

《⠀⠀Founder of Inshare.fr⠀》

《⠀⠀Baylife moderator⠀》

《⠀⠀Twitch channel moderator⠀》

《⠀⠀French translator Trucksbook.eu⠀》

𝐹𝑒𝑒𝑙 𝑓𝑟𝑒𝑒 𝑡𝑜 𝑤𝑟𝑖𝑡𝑒 𝑎 𝑐𝑜𝑚𝑚𝑒𝑛𝑡

—————————————————

╱⠀⠀⠀⠀⠀⠀⠀⠀⠀Règlements⠀⠀ //⠀⠀Abonnements⠀⠀ //⠀⠀ Discord   ⠀⠀⠀⠀⠀⠀⠀⠀⠀╲

 

signature.png

Lien à poster
Partager sur d’autres sites
Invité
Ce sujet ne peut plus recevoir de nouvelles réponses.
 Partager
Aller sur la liste des sujets
×
×
  • Créer...