👩🏼💻How to use fonts and Icons in HTML / Visual Studio Code
If you are reading this than you are probably wondering how to add different beautiful fonts into visual studio codes and how to use icons. I wanted to share this both in one article because when I was googling about at first I found too many information that did not serve me.
✍🏽So first, the websites to find beautiful 𝕗𝕠𝕟𝕥𝕤
𝕚𝕔𝕠𝕟𝕤
First you find which font to use. If you choose a for example Playfair Display from Fonts.google, you select 👉🏽+select this style.
This would be the link you copy and paste into the <head> of your html template in Visual Studio Code:
<link href=”https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel=”stylesheet”>And in your stylesheet style.css you will choose font-family: “Playfair Display”;
👇🏼
Let’s talk about Icons 😊
Add this into the <head> of your HTML template
<linkrel="stylesheet"type="text/css"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
and than into your HTML <body> where you want icons to appear you write
<i class=”fas fa-home home-icon”></i> and than you style it in CSS
Looking like this:
