Social media Icons?

Backlight 4, 5 & 6 Support
#1

OK, so i have found the social media links and having ridiculous problems showing an icon in the top right corner of my pages.

For example, facebook should be this -

<i class="fab fa-facebook"></i>

Guess what appears on my website? Yep, the actual code, not the icon as its suggested in backlight.

I even uploaded a facebook icon via FTP and then referenced it, but it doesnt show the icon, just a grey square.

Why is this? What am i doing fundamentally wrong for something so simple to implement?
I am incredibly frustrated by something so simple, or should be!!!

#2

you donā€™t need to add the code, just the name of the icon.
See the instructions right at the top of the Social Media section of the page template

1 Like
#3

I did read the instructions, but obviously over thinking it !!!

Its now working! :astonished:

1 Like
#4

I was having trouble with the social media iconsā€¦ This post was very helpful when searching for the answer. I was making another mistake by capitalizing the F in Facebook and I in instagram and the icon would not show up ā€¦ Do not capitalizeā€¦

#5

My social media icons are not appearing. The box background is there but I canā€™t seem to get the icon to appear like the search box beside them.

Iā€™m using ā€œfacebookā€ and ā€œtwitterā€ for the Icon, per the instructions. My test page is https://www.bretculp.com/

In Chrome and Firefox I see an outlined red square, the test color of the icon, inside the bg box and in Safari I only see the bg box.

Any help is appreciated. Thanks a lot.

#6

what version of Backlight are you using?

Iā€™m seeing the icons while viewing on my ioad

#7

5

#8

This is what I see,

Screenshot 2023-06-30 at 8.43.17 PM
Screenshot 2023-06-30 at 8.43.17 PM804Ɨ582 27 KB

#9

Update Backlight to latest version, 5.3.1

#10

Sorry, I was on 5.3.1,

Screenshot 2023-06-30 at 10.52.01 PM
Screenshot 2023-06-30 at 10.52.01 PM2322Ɨ1158 117 KB

#11

It appears to be something in my custom css.

#12

Oddly, this was the offender in my custom css, since removed.

a:link {font-family:ā€˜Open Sansā€™,Verdana,sans-serif }

#13

If your custom css is using Font Awesome 5 Pro icons, change the code to use Font Awesome 5 Free icons.
BL5 no longer uses the Pro icons

1 Like
#14

Yeah, thatā€™s because youā€™re telling it to use a font other than Font Awesome.

#15

Hi, what is about the Button scroll to top?

After scrolling down in the right upper corner.
Is this too a font awesome problem? The arrow is missing.

Rainer

#16

Yep. Icons using ā€œfarā€ are Pro icons. Change to ā€œfaā€ or ā€œfasā€

#17

What version of Backlight are you using?

#18

Backlight 4, at time, in Backlight 5 there is no function I will use.

Where have I to change this setting? Forgotten, where it is.

Rainer

#19

Itā€™s in the phplugins file in your scripts section.

When I first looked, I thought I saw that you were using ā€œfarā€ for the icon prefix. I donā€™t see that now thoughā€¦

#20

Youā€™re also missing the down arrows in your navigation. This is because Font Awesome 5 Pro is no longer part of Backlight.
See this topic for more info