Information circle /HTML

HTML-CSS
1

Hello,

Here is my code, the information circle doesn’t work.

Thank you in advance.

CTYPE html>
<html>	
	<body >
		<head>	
			<link rel="stylesheet" type="text/css" href="reservia.css">
			<link rel="preconnect" href="https://fonts.gstatic.com">
			<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
			<link rel="stylesheet" type="text/css" href="file:///Users/loussinesaratelian/Dropbox/Mon%20Mac%20(MBP-de-Loussine)/Desktop/RESERVIA/fontawesome-free-5.15.1-web/css/all.css">
			<title>Réservia</title>
			<meta charset="utf-8">
		</head>
		<header>
			<p>
				<img src="resphoto.png">
			</p>
			<nav class="menu">
				<a class="menu-hébergement" href="">Hébergement</a>
				<a class="menu-activités" href="">Activités</a>
				<a class="menu-inscription" href="">S'inscrire</a>
			</nav>
		</header>
		<h1 class="grands-titres">Trouvez votre hébergement pour des vacances de rêve</h1>
		<p>En plein centre ville ou en pleine nature</p>
		<nav class="input-group">
			<span class="map-marker">
				<i class="fas fa-map-marker-alt"></i>
			</span> <!--span est un conteneur générique en ligne (inline)-->
			<input type="text" value="Marseille,France">
			<button>Rechercher</button>
		</nav>
		<form method="post" action="traitement.php" class="flex-groupe">
			<h1 class="filtres">Filtres</h1>
			<div class="group-filtres">
				<nav class="economique">
					<div class="money">
 						<i class="fas fa-money-bill-wave"></i>
 					</div>
					<button class="eco-button">Économique</button>
				</nav>
				<nav class="familial" >
					<div class="children">
						<i class="fas fa-child"></i>
					</div>
					<button class="fam-button">Familial</button>
				</nav>
				<nav class="romantique"> 
					<div class="heart">
						<i class="fas fa-heart"></i>
					</div>
					<button class="rom-button">Romantique</button>
				</nav>
				<nav class="animaux-autorises">
					<div class="dog">
						<i class="fas fa-dog"></i>
					</div>
					<button class="anim-button">Animaux autorisés</button>
				</nav>
			</div>
		</form>
		<i class="fal fa-info-circle"></i>
		<p>Plus de 500 logements sont disponibles dans cette ville</p>
		<main>
			<h1 class="grands-titres">Hébergements à Marseille</h1>
		</main>
	</body>
</html>
2

Hi, @Loussine.
could you translate it to English?
and what is life-cycle in your code?
explain more about your code.

1 Like
3

Hi @Jack628

I need to use this icon, but it doesn’t work.

f05a

4

info-circle
info-circle1950×1018 79.5 KB

5

so, you want to create your own web page?
if so, you should import css, font files to your project.
where you find this icon?
I mean this ‘fal fa-info-circle’ icon?
let me check it for you.

6
1 Like
7

Typo here. Where arethe other letters?

8

you can use cdn …i advice use versioin 4 it is free

9

Even font awesome 5 is also free.

10

look it is pro

1 Like
12

Hey @Loussine!
Do you have pro version?

1 Like
13

I don’t have pro version , so if i understood well it doesn’t work because I don’t have pro version?

14

Try to use this code

<i class="fas fa-info-circle"></i>

<i class="fas fa-info-circle"></i> //Free version

<i class="fal fa-info-circle"></i>  //Pro version
1 Like
15

@Jack628

I’m creating a web page;

https://fontawesome.com/icons/info-circle?style=light This icon doesn’t work on html…

The other icons work as you see, but not the "information circle ".
So I’m here to understand if I have done mistakes in my code…

16

Thank you , this one works.
:heart_eyes:

1 Like
17

how about use fab or fa or fas rather than fa.
if you want to use fal, you should pay 99USD per year.
your code:

<i class="fal fa-info-circle"></i>

my suggestion:

<i class="fa fa-info-circle"></i>
or
<i class="fas fa-info-circle"></i>
or
<i class="fab fa-info-circle"></i>

sorry, I am late.

1 Like
18

As you see here

Info_Circle_Icon_Light_Font_Awesome
Info_Circle_Icon_Light_Font_Awesome126×550 3.26 KB

And As @Jack628 said you have pay 99USD to use pro icons

1 Like
19

@Jack628 Next time I’ll try to be clearer. Thank you.

1 Like
20

you’re welcome.
So sorry too late.
try these icons later. I hope it helps you.
thank you for your reply.

2 Likes