
Explore integrating Font Awesome version 5, a free open source icon toolkit. Learn to use vector icons and social logos in web projects, including sizes, fixed width, and layers.
I want to ensure that you succeed in this course, so this lecture is about how you can get the most out of this course and a quick overview of how Udemy's Review Process works.
Explore two ways to integrate font awesome 5: svg with javascript for rendering, and css-class icons that inherit styles. Set up with visual studio code and a server for previews.
PDF File Containing Links To Official Website Of Resources Used In The Course
information and updates on how to get the most out of next lecture by keeping up with the frequent redesign of Font Awesome website
information and updates on how to get the most out of next lecture by keeping up with the frequent redesign of Font Awesome website
Information regarding the legacy way of adding Font Awesome into your projects.
Learn to download, extract, and install Font Awesome web fonts, copy the font files into your project, reference the CSS in your HTML, and test icons with correct paths.
Learn the basics of Font Awesome 5 in the free version, including solid, regular, light, and brands icons, using i or span elements with class names.
Apply the font awesome fa-fw class to all icons to give them the same fixed width and align them, ideal for navigation lists.
Learn to style Font Awesome icons with borders and pull alignment using fa-border, fa-pull-left, and fa-pull-right, and apply sizes like fa-2x to icons such as fa-quote-left, fa-quote-right, and fa-camera-retro.
Discover how to add spin and pulse animations to icons by applying spinner category icons, using circle and circle-notch icons, and observe smooth 360-degree spins and eight-step pulses.
Learn how to stack icons using font awesome 5 by placing two icons in a span container with stack classes, sizing with fa-stack-1x and fa-stack-2x, and coloring with css.
Explore how SVG and Font Awesome 5 enable power transforming icons with the data-fa-transform attribute, including scaling, positioning, rotating, and flipping, via three methods using SVG with JavaScript.
Learn power transforming icons with scale to change size without altering the container. Apply shrink and grow values via data attributes and transform attributes, and preview results in the browser.
Master power transform positioning in Font Awesome 5 by moving icons up, down, left, or right using data-fa-transform values and transform attributes, then adjust size to fit within the container.
Learn to rotate and flip Font Awesome icons using transform attributes, including negative angles, horizontal and vertical flips, and combined values, with hands-on examples.
Mask icons in font awesome 5 by combining inner and outer parts with mask attributes and transforms to create a single color shape without background.
Explore three methods for layering text and icons with layers in Font Awesome 5, including adding a text layer atop an icon and layering counts onto an icon.
Learn to stack Font Awesome 5 icons by layering with fa-stack, applying color and transform to create layered icons, like a red circle with an x.
Learn to add a text layer to a Font Awesome icon using a span, apply classes to display a number on a calendar icon, and tweak color and transforms.
Upgrading From Version 4 To Version 5 of Font Awesome Icons Using Shims
Celebrate completing the complete Font Awesome 5 course and gain confidence to add interactive icons to your websites, while embracing practice, learning, and improvement.
Alternatives To Font Awesome
Do you want to learn the number #1 iconic Web font toolkit that most popular websites use on the Internet?
Are you tired of wasting your time on random YouTube videos or Font Awesome courses that are too difficult to follow?
Do you want to learn how to build icon based web designs?
Does the quality of your image based icons become poor and pixelated when you resize your website?
OR
Do you struggle to read and understand documentation of a web framework?
If your answer is YES... then this is exactly the course you are looking for!
By the end of this course you will be comfortable with:
Solid understanding of Font Awesome 5 icon library and how it works.
Basic use of Font Awesome 5 classes.
Integrating Font Awesome 5 into your Web projects
Set icon sizes
How to set icons to the same fixed width.
Use list icons to replace default bullets in unordered lists
Add borders & Pull icons left or right inside of its parent container.
How to add basic animations to icons, especially icons in the Spinner Category.
How to stack Icons - Classic Method
How to position Icons - Classic Method
Add Power Transform effects [Scaling, Positioning, Rotating & Flipping] - New
Combine 2 icons to create 1 single color shape by Masking - New
Adding Layers, Text & Counters to Font Awesome icons - New
The quickest way possible to upgrade your current projects based on Font Awesome version 4 to Font Awesome version 5 using Shim files.
Why is it important to learn the above?
- These days, just knowing HTML, CSS, and JavaScript is great for beginners, but you have to constantly keep on learning to improve your skill set.
- Nowadays, icons are playing a major role in website designing. Developers are constantly focusing on icons because they are very important for any website. Research shows that most users try to scan a website when they visit for the first time.
Therefore, developers should build a very interactive website that should attract users. One way of creating interactive websites is to add icons to your website.
So why should you include icons in your web projects?
a. Because icons support content by drawing attention:
Pictures are important and worth a thousand words, just like icons too.
Websites without icons and pictures turn off people when they visit your website. That is why it's important to integrate icons, images, and other visuals into your designs.
b. Because Icons can increase readability:
Lists can increase the readability of your content. However, regular list bullets can be less appealing to the end user visiting your website.
Instead of using regular list bullets, you can use engaging icons to draw attention to paragraphs and other blocks of content. This is because icons are easier to recognize and remember than regular list bullets. Also, icons make it easier to separate different blocks of text from one another.
This course is a perfect fit for you if...
#1. You want to gain a deep understanding of the most popular Iconic Web font framework on the Internet.
#2. You searched YouTube or other resources only to find outdated lessons and tutorials.
#3. Interested in learning how to add icons to your website by using the popular icon library Font Awesome.
Now is the time to decide. This is what you get:
Lifetime access to HD quality videos. No! monthly subscription. Learn at your own pace, whenever you want.
All videos are downloadable. Learn wherever you want, even without an Internet connection!
Downloadable resources which contain starter code for each section.
Interactive annotations to help you keep track and follow along when looking at the code.
Basic animations to help you understand concepts.
Free and helpful support in the course Q & A when you have questions or get stuck.
Bite-sized and easy to digest videos.
Practice Quizzes in each section to test your understanding.
If this sounds great? Then start this adventure with me today by enrolling in this course and join me in the only Font Awesome 5 course that you will need!