Link Search Menu Expand Document
HTML&CSS

Lesson 15 - Importing Libraries Icons, Fonts, and more!

Agenda

  1. Learn about icons and how to import and manipulate them 😎
  2. Learn about importing new fonts
  3. Learn about bootstrap
  4. Learn about best practices of importing libraries 😉
  5. Practice!

1. How do CSS libraries work?

CSS library gives web developers a basic structure, which includes grid, interactive UI patterns, web typography, tooltips, buttons, form elements, icons. This structure helps web developers to start quickly and efficiently when they are designing a website or web applications.

Useful resources Font Awesome Bootstrap Google Fonts

2. Icons

What do you need ICONS for? Because they Optimize Navigation

  • Help communicate concepts
  • Make browsing a website simpler
  • Improve user experience
  • Icons can be formatted like text including shadows and reliefs, layers, geometric, 3D effects, etc.
  • Can make websites look more professional

3. Adding Icons from FontAwesome

Create a free account on Font Awesome; Create a personal Kit Copy the unique Kit embed code and paste it into the <head> of your project’s HTML file or template. Start placing icons in your HTML’s <body> Ex: Color, size, rotate, animate, transform icons with ease!

Icons Demo

4. Adding Google Fonts

Go to https://fonts.google.com/ Pick up a font-family you like Select the required styling option Import to HTML head using Specify the font family and use

Fonts Demo

5. Bootstrap

Include Bootstrap’s CSS and JS. Place the tag in the <head> for our CSS, and the

Excersise - 15min

Practice by adding fonts, bootstrap components, and icons!

Key Takeaways

Libraries are useful collections of basic structures. Libraries need to be imported to connected (via ) Icons should be treated as text and all text properties will apply on the icons as well. Remember to import the required stylings of font when using external libraries

Homework

Keep working on your webpage template! Think about what you might want to do for your final project. Use this as a learning experience! Websites should include: Html file(at least 2) CSS file (how do we connect this to html? 🧐) Navbar Linking between pages (with back button!) Icons (fontawesome - try using animation 😀 ) Google fonts (use at least 2 for different elements) Use anything else you want to try out!

Resources

https://getbootstrap.com/ https://fontawesome.com/ https://fonts.google.com/