Community @ The Turning Gate

Support community for TTG plugins and products.

NOTICE

The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.

This forum is now closed, and exists here as a read-only archive.

  • New user registrations are disabled.
  • Users cannot create new topics.
  • Users cannot reply to existing topics.

You are not logged in.

#1 2018-12-15 19:00:26

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 401
Website

Font Awesome Icons

Hi, I have much read about fontawesome icons.
I understand the code and the css values. But I don't understand, where I have to place the code.
The home-icon in menu bar or an icon in top pallet for example. And where and how have I to place the links?

Thanks,

Rainer

Offline

#2 2018-12-15 22:04:44

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Font Awesome Icons

It depends on how it’s implemented.

To add an icon to a nav menu item you can simply copy the code and place it in the Name field in the Menu Set.
For example, if you want to use their “Telegraph” icon (looks like a paper airplane) in front of the word “Contact” on the navigation menu, past their code and add the word after it:
<i class="fa fa-telegram" aria-hidden="true"></i> Contact

For other things, you’ll need to look at the page’s source code to see how Matt is adding the icon.
In many places (if I remember correctly) he’s using the Unicode value in the css content: property.
The items usually have a class assigned to them so it’s just a matter of using custom css to replace the value in the content: property.

Still others may be hard coded into the html. In that case, you’d need to use jQuery to replace the icon.

This is old (CE3 old), but it shows how to use jQuery to replace an icon:
http://ttg-tips-and-tricks.barbeephoto. … -ttg-page/
(I should write another Font Awesome tutorial for Backlight. When I do, I’ll mention it here)

Use the updated Backlight phplugins syntax and new phplugins files to add scripts
http://community.theturninggate.net/vie … hp?id=8966

I believe Backlight supports version Font Awesome version 4.7 so choose fonts from that version
https://fontawesome.com/v4.7.0/icons/

If you have something specific you want to replace and need help with it, post back.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#3 2018-12-16 00:18:20

Rainer Goergen
Member
From: Trier, Germany
Registered: 2016-05-01
Posts: 401
Website

Re: Font Awesome Icons

First thanks, I will try it soon and post back.

Rainer

Offline

Board footer

Powered by FluxBB