Social Icons in global footer

[mdurkee]

I am working on setting up responsive site and am using the bootstrap standard framework. When I try to edit the social icons I am seeing that the one for YouTube and Instagram do not work the way I expected. I looked around for the correct font to use to generate the little icon but they just come up with a little box. Is this due to the fonts not all being installed on the server? a link to the site is here.
Thanks for any help.
Maxanne

[lesliekirk]

Re: Social Icons in global footer

I'm still sort of learning how the font-awesome.css works - take peek at that file.

Leslie

[mdurkee]

Re: Social Icons in global footer

Thanks Leslie,
That is where I started too and then I read up quite a bit about font-awesome. That is why I came to the conclusion that something may not be installed correctly. Most of the icons show up but just not the last two. It looks like everything is coded correctly on the style sheet as well as on the page. Any ideas - anyone?

[mdurkee]

Re: Social Icons in global footer

Well, I believe I finally found the problem. In the header of the document the default template has placed the source for the fonts like this:

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" />

When I replaced it with this:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

All the icons show up correctly.
Just wanted to post the solution just in case anyone else has the same issue.

[lesliekirk]

Re: Social Icons in global footer

Have you tried copying the file and serving from your own site instead of from bootstrapcdn.com?

[Brennan]

Re: Social Icons in global footer

I have come across this a couple times as well. Sometimes the font files are not copied to the server correctly when the framework is installed.

There are two parts to the font-awesome icon set.

A CSS file which should automatically get uploaded here:

/mm5/css/00000001/font-awesome.css

then this css file references a font file (actually a few different files for cross platform compatibility)

mm5/fonts/fontawesome-webfont.eot?v=3.2.1
mm5/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1
mm5/fonts/fontawesome-webfont.woff?v=3.2.1
mm5/fonts/fontawesome-webfont.ttf?v=3.2.1
mm5/fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1

Both times I have seen this issue, these font files were missing or the path was incorrect.

[mdurkee]

Re: Social Icons in global footer

I have come across this a couple times as well. Sometimes the font files are not copied to the server correctly when the framework is installed.

then this css file references a font file (actually a few different files for cross platform compatibility)

mm5/fonts/fontawesome-webfont.eot?v=3.2.1
mm5/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1
mm5/fonts/fontawesome-webfont.woff?v=3.2.1
mm5/fonts/fontawesome-webfont.ttf?v=3.2.1
mm5/fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1

Both times I have seen this issue, these font files were missing or the path was incorrect.

Exactly Brennan! I can see that the .svg file is missing in my installation. Also, the version information is not there as far as I can see when viewing with Core FTP software. the path is correct but they show up as:
fontawesome-webfont.eot
fontawesome-webfont.ttf
fontawesome-webfont.wolf
FontAwesome.otf (notice the upper lower case on this one.)
I downloaded the svg file from fontawesome.io but even with that copied to the server, the missing icons don't show up. I will keep trying. Thanks for the tip.