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?
Iată câteva lucruri de reținut atunci când adăugați Font Awesome la următorul dvs. proiect.
Adăugați linkul în cap
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:
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.
#Cum #folosește #Font #Awesome #v572 #HTML
Cum se folosește Font Awesome v5.7.2 cu HTML