Aller au contenu

Cloudfordream

INFORMATION

Google annonce la fermeture du service Google+ le 2 avril 2019.

Nous recommandons aux personnes s'étant inscrites sur le forum via Google+ d'ajouter un mot-de-passe à leur compte avant la fermeture du service Google+ cité ci-dessus.

 

Pour avoir un mot-de-passe, rendez-vous ici: https://habbo-dev.fr/parametres/mot-de-passe

  • Veuillez ne pas poster de message pour but d'insulter, incitation à la haine, propos sexuels et tout autre qui ne respecte pas nos conditions d'utilisation !
Hudson Hornet

Installation Font Awesome 5 (local)

Messages recommandés

Ce commentaire a été jugé la meilleure réponse à ce sujet
Fabulous

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 :

 

image.png.d20c89003eb1266ef26fbaa16b765699.png

 

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 Vous devez avoir 7 jours d'ancienneté ainsi que 10 message pour débloquer ce lien.

Partager ce message


Lien à poster
Partager sur d’autres sites
Premium
.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

Partager ce message


Lien à poster
Partager sur d’autres sites
Fabulous
		.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)

Partager ce message


Lien à poster
Partager sur d’autres sites
Premium
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. 

Partager ce message


Lien à poster
Partager sur d’autres sites
Fabulous

Comme ça ?

content: '\ fas f07a';

Partager ce message


Lien à poster
Partager sur d’autres sites
Premium

Dans ta balise html dans la classe tu rajoute class="fas blabla"

Partager ce message


Lien à poster
Partager sur d’autres sites
Fabulous

Ç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;
}

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Premium

FAS pas FAR

Partager ce message


Lien à poster
Partager sur d’autres sites
Fabulous
Il y a 2 heures, Akushi a dit :

FAS pas FAR

Idem 😐

Partager ce message


Lien à poster
Partager sur d’autres sites
Le 22/02/2019 à 20:42, Akushi a dit :

.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.

enfin moi ça fonctionne comme ça ^^'

Oui meilleur code

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

Modifié par Kurumi Tokisaki

Partager ce message


Lien à poster
Partager sur d’autres sites
Fabulous
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 ?

Partager ce message


Lien à poster
Partager sur d’autres sites
Fabulous

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

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité
Ce sujet ne peut plus recevoir de nouvelles réponses.

×