Font Awesome este unul dintre cele mai populare moduri de a adăuga pictograme pe site-ul dvs. Dar dacă adăugați CDN la <head> elementul paginii dvs. și tot ce vedeți sunt dreptunghiuri negre?

Cum se foloseste Font Awesome v572 cu HTML

Iată câteva lucruri de reținut atunci când adăugați Font Awesome la următorul dvs. proiect.

Imaginați-vă că aveți următorul HTML:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="https://www.freecodecamp.org/news/how-to-use-font-awesome-v5-7-2-with-html/testing.css">
	<link rel="stylesheet" type="text/css" href="css/all.css">
	<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
</head>
<body>
	<i class="fab fa-github-square"><a href="https://github.com/willyblackkeez" id="profile-link"></a></i>
	<i class="fab fa-facebook"></i>
</body>
</html>

Ca și alte CDN-uri, trebuie să adăugați un <link> element la <head>. Pentru Font Awesome 5.7.2, va arăta cam așa:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

Online vs local

Dacă rulați următorul cod într-un editor bazat pe web, cum ar fi CodePen sau CodeSandbox, următorul cod redă pictogramele în mod corespunzător:

<!DOCTYPE html>
<html>
<head>
	<title></title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
	<link rel="stylesheet" type="text/css" href="https://www.freecodecamp.org/news/how-to-use-font-awesome-v5-7-2-with-html/testing.css">
	<link rel="stylesheet" type="text/css" href="css/all.css">
	<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
</head>
<body>
	<i class="fab fa-github-square"><a href="https://github.com/willyblackkeez" id="profile-link"></a></i>
	<i class="fab fa-facebook"></i>
</body>
</html>

Dar dacă încercați să deschideți pagina local într-un browser, veți vedea totuși dreptunghiurile negre în loc de pictograme:

1611876844 455 Cum se foloseste Font Awesome v572 cu HTML

Aruncați o altă privire la href în <link> element de mai sus. O vezi?

Problema este că, atunci când încărcați pagina din sistemul dvs. de fișiere local, browserul încearcă să găsească fișierul Font Awesome CSS la rădăcina sistemului de fișiere.

Pentru ca lucrurile să funcționeze online și local, asigurați-vă că adăugați schema URL (HTTP sau mai bine, HTTPS) la href:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

Ce se petrece aici?

Când lăsați schema URL (href="https://use.fontawesome..."), apoi browserul folosește aceeași schemă URL cu care a fost încărcată pagina.

Deci, dacă rulați pagina local executând fișierul HTML într-un browser, href presupune că Font Awesome CSS este, de asemenea, un fișier care este, de asemenea, salvat local (file:).

Doar asigurați-vă că href atribute pentru dvs. <link> toate elementele indică adresa URL completă, inclusiv schema URL și ar trebui să fiți bine.