Build Beautiful Icon Based Web Designs with Font Awesome
4.5 (32 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
9,301 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Build Beautiful Icon Based Web Designs with Font Awesome to your Wishlist.

Add to Wishlist

Build Beautiful Icon Based Web Designs with Font Awesome

Welcome to the Font Awesome Master Class!
4.5 (32 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
9,301 students enrolled
Last updated 7/2017
English
Current price: $10 Original price: $25 Discount: 60% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Have access to more than 650 FREE icons that are fully scalable and customizable!
  • Integrate Font Awesome into web apps like WordPress!
  • Learn to use CSS to change the color and size of the icons!
  • Learn to pair the icons with jQuery and CSS to produce an awesome user experience!
  • Integrate Font Awesome into Office applications such as Microsoft PowerPoint and Word!
View Curriculum
Requirements
  • Basic knowledge of HTML and CSS would be helpful, but is not required since I provide an intro to each!
  • A drive to learn!
Description

Do you want to learn how to easily create icon based web designs? Are you tired of using raster based icons (.bmp, .jpg, .png) that degrade when you resize them? Then this course is for you! This course demonstrates how to use and customize the icon based font library Font Awesome! Font Awesome can be used in web applications, web sites, and even in office products like Microsoft PowerPoint and Microsoft Word!

Each of the Font Awesome demonstrations include a sandbox which are hosted on JSFiddle. This allows you to easily practice the techniques I teach you! I also provide practical examples of how to use the icons to create an awesome user experience!

Who is the target audience?
  • Anyone who wants to easily use completely free, flexible, and scalable icons to enhance the user experience.
  • Anyone who wants to be free from the limitations of traditional pixel based icon libraries, and be able to use vector based icon font libraries!
  • Anyone who wants to use completely free, flexible, and scalable icons in their documents or presentations.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
35 Lectures
02:07:06
+
Course Introduction
1 Lecture 02:56

Learn about me and what you are going to learn in this course!

Preview 02:56
+
Raster & Vector Based Graphics
4 Lectures 15:57

Learn about Raster based graphics!

Raster Based Graphics
04:54

Learn about vector based graphics!

Vector Based Graphics
06:07

I manipulate a vector graphic and show the export feature of Inkscape.

More on Graphics (Vectors)
03:45

I demonstrate that fonts are vector based graphics.

More on Fonts (Vectors)
01:11

Knowledge Check
5 questions
+
Intro To Font Awesome
1 Lecture 06:14

An introduction to Font Awesome. We walk through the website, the icon gallery, and the example page.

Preview 06:14

Knowledge Check
4 questions
+
Integrating Font Awesome
4 Lectures 14:59

Learn how to install Font Awesome as a system font in applications like Microsoft Word and PowerPoint. I demonstrate this on a Windows 10 computer.

As a System Font on Your Computer (Part 1 - Installation)
01:51

Learn how to use the Font Awesome library in applications on your computer!

As a System Font on Your Computer (Part 2 - Implementing)
05:32

Learn how to integrate Font Awesome into WordPress!

Into WordPress (Part 1 - Installation)
02:01

Learn how to use Font Awesome in WordPress using HTML and shortcodes!

Into WordPress (Part 2 - Implementing)
05:35

Knowledge Check
4 questions
+
Intro To HTML
4 Lectures 14:11

Learn the basics of HTML!

Preview 01:06

Learn the difference between HTML tags and elements!

Difference Between HTML Tags & Elements
01:31

See several examples of HTML tags!

HTML Tags
07:16

See several examples of HTML attributes!

HTML Attributes
04:18

Knowledge Check
10 questions
+
Intro To CSS
5 Lectures 16:47

An intro to CSS.

Preview 02:15

A summary of CSS properties like color, text-align, and font-family.

CSS Properties
02:27

Learn how to select elements and style them with CSS.

CSS Selectors
06:41

Learn how to apply CSS inline!

Inline CSS
01:56

Learn how to apply CSS using a class.

CSS Classes
03:28

Knowledge Check
7 questions
+
Font Awesome's Built-In CSS Classes
8 Lectures 22:24

Learn how to structure a HTML element so the Font Awesome icon will appear!

Basic Icons
03:35

Learn how to make the icons larger!

Larger Icons
02:56

Learn how to make the icons a fixed width!

Fixed Width Icons
03:02

Learn how to replace the default HTML <ul> bullets with Font Awesome icons!

List Icons
01:28

Learn how to create bordered and pulled icons!

Bordered & Pulled Icons
02:18

Learn how to animate the icons!

Animated Icons
04:21

Learn how to rotate the icons!

Rotated & Flipped Icons
01:06

Learn how to stack the icons!

Stacked Icons
03:38

Knowledge Check
5 questions
+
Styling Font Awesome with CSS
5 Lectures 15:13

I discuss strategies for styling the icons. Custom class, element, fa class, or fa-icon class.

Strategies for Styling Font Awesome Icons
04:04

Learn how to change the color of the icons!

Color
03:00

Learn how to change the size of the icons!

Size
02:06

Learn how to change CSS properties when you hover over the icons with your mouse!

Hover
02:00

Learn how to smoothly apply :hover changes to the icons!

CSS3 Transition
04:03

Knowledge Check
2 questions
+
Using Font Awesome with jQuery
3 Lectures 18:25

Learn how to change an icon to a different icon when the user hovers over the icon.

Different Icons on Hover
10:26

Learn how to replace the text in jQuery UI's buttons with Font Awesome icons!

Using Icons as Buttons in a jQuery UI Dialog
03:15

Pair jQuery & CSS with Font Awesome to create a pulsing wifi icon!

Pulsing Wifi Icon
04:44
About the Instructor
Jacob Hill
4.5 Average rating
31 Reviews
9,301 Students
1 Course
Contributing To Your Success!

Jacob has been working in the United States Federal IT arena for over 10 years. He has a bachelor's degree in IT concentrating in security, and holds the CISSP certification as well as other certifications. He specializes in the cyber compliance, information management, and client side web development.

Jacob has created impressive web applications using SharePoint as a platform. Many don't use SharePoint to it's full potential, but Jacob is able to unlock it using responsive web design, Font Awesome, jQuery, and SharePoint web services.

Jacob also has experience administering and developing using the WordPress platform. He has used these skills to build a website for the Church he attends, and has also engineered an audio stream that is used by folks who cannot physically attend.

Jacob wants to help you take your career to the next level! Jacob is confident that his courses can contribute to that goal, and is looking forward to hearing your success story!

Paul Hill
4.5 Average rating
5,392 Reviews
73,705 Students
13 Courses
Expert IT Instructor: 72k+ Students, 5k+ Reviews, 13 Courses

Paul is an IT Professional with over 8 years of experience currently working as a Network Administrator in contract support of various Federal Agencies in the United States.

Paul began his career by volunteering his computer skills at his local church at the age of 16. He identified a technology problem the church was having and designed a system to fix it . Other IT Professionals at the church encouraged Paul to continue utilizing his skills to gain experience, and emphasized that he should include it on his resume even though his experience wasn't paid.  Based solely on the experience he gained volunteering, a large DoD contracting company hired Paul as an intern.   As his career progressed, Paul moved on to another Large company to work full time.

Paul constantly pushes himself to increase the depth of his knowledge in the field of Information Technology and expand his skill-set, whether on the job or at home. Paul gratefully notes that he “had the blessing of working alongside highly motivated and talented professionals” who continually inspired and pushed him to take challenges head-on, and to make EVERYTHING you can out of opportunities that arise while on the job. His motto is "Any job is what you make of it. You write your own resume and paycheck by your drive to succeed."

Paul's goal on Udemy is to help YOU get an IT job by providing you a basic skill-set. The fact is that most entry level IT jobs (Help Desk) in the NCR are paying only 10k under the median HOUSE HOLD income from just ONE entry level job and a much higher potential to double or triple the median house hold income throughout one's career. The IT field is viewed as very difficult to enter, but if you have a good skill-set and determination to succeed, you WILL get hired!