Adding Social Icons-Canvas

Took a bit of searching to figure out how to add social icons to the header (one ideaanother). In the end I didn’t like how it looked both in terms of colour and location. As I kept on searching I found out that the theme uses Font Awesome to create the icons. Kept playing and searching to figure out how to change colour as I am deeply into blue these days. Still was not that crazy about the social icons location so I kept on looking. I found a set of videos at Poodle Press. The videos showed that you can use a widget to place the social content in the header. You could remove the title text and change the alignment of the widget content. Much closer to what I wanted.

#connect h3 { display: none; }
#connect p { display: none; }
#connect .social { text-align: right; }

The videos used a child theme and Canvas doesn’t need that anymore. It’s just a matter of looking at the CSS make a few changes then add the modified CSS to the Custom CSS Template.

Using the Safari Web inspector (select preferences from the Safari Menu then select advanced and show develop menu) I was able to find the CSS that controlled the social icons from Font Awesome. The next step was to add them to the Custom CSS template changing the font colour  (blue) and background colour (white). The example below is the example for the twitter font.

#connect .social a.twitter:before {
content: ‘\e002’;
color: #023663;
background-color: #FFFFFF; }

Used to do this a lot a few years back and forgot that I enjoyed it.

With his move to my sister’s house my 85-year-old father has changed his reading habits. With his iPad he has expanded his reading selection, BBC, The Guardian, A number of Italian papers, McLeans, Noam Chomsky and wherever links take him.

As he has told me you can find anything out there.