diff --git a/_posts/2025-10-16-font-awesome.md b/_posts/2025-10-16-font-awesome.md new file mode 100644 index 000000000000..ca97b594c52f --- /dev/null +++ b/_posts/2025-10-16-font-awesome.md @@ -0,0 +1,29 @@ +--- +layout: post +title: Clean, consistent icons with Font Awesome +subtitle: A quick guide to adding Font Awesome +cover-img: /assets/img/apple_orchard.jpg +thumbnail-img: /assets/img/apple_orchard.jpg +share-img: /assets/img/apple_orchard.jpg +tags: [tech, font_awesome] +--- + +I recently gave my website a much-needed facelift, and I wanted to add icons inside the "Highlights" section to distinguish featured projects and blog posts. I didn't want to use emojis because they felt a little too casual and out of place. After a little bit of Google searching, I found [Font Awesome](https://fontawesome.com/), an icon library that allows you to embed icons in your HTML. + +I was so excited when I found this site, because they have over 2,000 icons that can be used for free, all of which maintain a consistent styling. + +![FontAwesome1](../assets/img/font_awesome_screenshot_1.png) +*Screenshot from the free icon page* + +The first thing I had to do to incorporate Font Awesome into my website was add the style sheet to my `_includes/head.html` page: + +``` + +``` + +Once that is in place, any of the free icons can be added to your HTML. After you find one you want to use, all you have to do is click on that icon, and a window will pop up with the HTML snippet you need to add the icon: + +![FontAwesome2](../assets/img/font_awesome_screenshot_2.png) +*Screenshot from the envelope icon pop-up window* + +I'm very pleased with how easy Font Awesome was to set up, and the icons helped me keep a clean and consistent style for my website. \ No newline at end of file diff --git a/assets/img/apple_orchard.jpg b/assets/img/apple_orchard.jpg new file mode 100644 index 000000000000..7597b529073a Binary files /dev/null and b/assets/img/apple_orchard.jpg differ diff --git a/assets/img/font_awesome_screenshot_1.png b/assets/img/font_awesome_screenshot_1.png new file mode 100644 index 000000000000..0b1b9f86cc8e Binary files /dev/null and b/assets/img/font_awesome_screenshot_1.png differ diff --git a/assets/img/font_awesome_screenshot_2.png b/assets/img/font_awesome_screenshot_2.png new file mode 100644 index 000000000000..b89a44a2dbe4 Binary files /dev/null and b/assets/img/font_awesome_screenshot_2.png differ