July 12, 2017
Font Based Icons in Responsive Design Using FontAwesome (this is really awesome)
Comments
(8)
July 12, 2017
Font Based Icons in Responsive Design Using FontAwesome (this is really awesome)
I've been an eLearning designer and developer since 2005. In 2015 I started my own eLearning design company. I began creating Adobe Captivate video tutorials to help promote my business through my YouTube channel at https://youtube.com/captivateteacher. My intention with my YouTube videos was to attract attention from organizations looking for a skilled Captivate developer. This strategy proved successful as I've worked with clients worldwide, helping them build highly engaging eLearning solutions. In addition, my YouTube channel presented another benefit of attracting aspiring Captivate developers to seek me out as a teacher. I now offer online and onsite training on Adobe Captivate, teaching users the skills to build engaging and interactive learning.
Legend 639 posts
Followers: 922 people
(8)

Previously I showed viewers how they could include the icons from the FontAwesome font in your Blank Projects (non-responsive projects). [watch that video here] In this video, I will show you how you can get the same icons in your responsive projects and add an awesome quality to your eLearning projects. Remember that fonts are essentially scalable vector graphics. There is no better way to make beautiful navigation and control icons in responsive design projects.

If you found my videos useful please consider subscribing to my YouTube channel: Paul Wilson Adobe Captivate Tutorials

If you think your colleagues will like my videos please use the share button at the top of this post.

8 Comments
2018-10-09 16:14:50
2018-10-09 16:14:50

Worked really Paul thank you

Like
2018-10-08 21:22:54
2018-10-08 21:22:54

Does this still work ? With the free version ?

The web page Paul shows us has changed since. I don’t see the email link anywhere.

I’ve tried both the “Web Font & CSS” and the “SVG & JS” links with no success. Since I have next to no skills in html or Java, it’s very difficult for me to troubleshoot this.

I also tried sdwarwick’s approach without any success.

Can anyone help me ?

Like
(1)
>
saxman789
's comment
2018-10-09 21:06:54
2018-10-09 21:06:54
>
saxman789
's comment

OK ! It works with version 4.7.0.

If, like me, you installed another version (version 5 in my case) and you have the same problem I had, install version 4.7.0 on your machine and go change the icons in your project for the previous Font Awesome version (4.7.0).

Thanks Paul for the quick replies and the helpful link.

Like
2018-10-06 13:31:44
2018-10-06 13:31:44

Does this still work ? And does it work for the free version ?

The “Get started” page has changed a bit it seems. I’ve tried both links (“Web font & CSS” and “SVG & JS)

I don’t see a way to request a link like Paul does on this video.

I also tried sdwarwick’s approach with no more success.

I don’t have any experience with html or java so I feel helpless trying to troubleshoot this.

Like
2017-11-19 05:37:12
2017-11-19 05:37:12

Thanks so much for this video. This worked very well for me.
Just a note for Mac users: In order to see the HTML code when opening the index file with TextEdit, you need to first go to the Preferences panel in TextEdit and tick the box next to “Display HTML files as HTML code instead of formatted text”.

Like
2017-07-12 14:17:11
2017-07-12 14:17:11

This is a great approach for folks that do mind doing post-processing on their projects, as every time you re-publish, you need to re-edit the index.html file.

As an alternate approach, you can see the following post which shows how to add web fonts into your captivate project in a way that doesn’t require any post-processing of the index.html file:

https://elearning.adobe.com/2017/03/using-custom-fonts-in-adobe-captivate

although it shows how to do this for google fonts, it also works for any remote font.

Like
(2)
>
sdwarwick
's comment
2017-07-12 14:40:14
2017-07-12 14:40:14
>
sdwarwick
's comment

um “don’t mind..”

Like
>
sdwarwick
's comment
2018-10-09 15:15:50
2018-10-09 15:15:50
>
sdwarwick
's comment

Hi sdwarwick,

Should I interpret your last comment to mean “never mind” ? (in other words, “I thought it would work but it doesn’t”)

I’m trying to figure this out and I’m not having any luck so far.

Like
Add Comment