🌐
Hack the Web
  • Welcome to Hack the Web
  • Getting Started
    • 🔥Course Overview
    • Why This is Important
    • 🛠️What We Will Build
  • Build with the Basics
    • Build with the Basics
    • HTML
    • CSS
    • JavaScript
    • 💥Putting it all together
    • Design Systems and CSS Frameworks
  • Design Basics
    • What Makes Good Design
    • 🏳️‍🌈Colors, Colors, Colors
    • 🔡Typography and Fonts
    • 🌀Graphics for Your Site
      • Types of Images
      • Where to Find Graphics
      • Image Formats
      • Other Media Formats
    • 🦄Icons
  • Don't Start From Scratch
    • ▶️Template Walkthrough
  • Misc Topics
    • Search Engine Optimization
    • ⭐Favicons
    • ☑️HTML & CSS Validation
    • 📊Performance Testing
    • Markdown
    • Mobile Responsive Design
  • Advanced Topics
    • Hosting Sites
    • ↔️Backend vs Frontend Development
    • ⚙️Browser Built-In Web Tools
  • Real-World Applications
    • 💼Career Paths in Web Design
    • Wordpress, Drupal, Website Builders
  • Conclusion
    • 🎉Course Recap
    • 📝Quiz for Certificate
    • 🦉Keep on Learning
  • SouthHills Info Request
Powered by GitBook
On this page
  • Integrating Icon Library
  • Some Examples of Icon Libraries
  1. Design Basics

Icons

PreviousOther Media FormatsNextTemplate Walkthrough

Last updated 6 months ago

Example of Icons Used in Web Design

Integrating Icon Library

To integrate an icon library like Font Awesome on your web page, follow these steps:

Include the Font Awesome stylesheet in your HTML <head> section:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Use the icons in your HTML by adding the appropriate class to an <i> tag: 

<i class="fas fa-camera"></i>

This will display a camera icon from Font Awesome as shown below:

Some Examples of Icon Libraries

🦄
https://fontawesome.com/
https://ionic.io/ionicons
Camera Icon