Social Icons in Nick Cates Writer Theme (likely other themes as well)

Again my usual disclaimer (almost total noob, HTML rookie)

I’m trying to add social media icons to my website. As you can see I’m adding them via the “footer” section in the “General Settings” tab on the inspector.

Here are my issues

  1. when I do it this way I get the nice big icons (which is what I want)
    these are under my text and look nice. However when I publish the only one that appears is the Google +

Also if I just add them in an html stack I get small icons like this:

These screen shots are from within Rapidweaver. When published the only one that appears is Google + pjkoltnow.com

  1. How can I get all the links to appear when published and in the big size?
    2a) How do I get to open them in new windows?

I’m sure I’m doing something that’s easy to fix, I just don’t know how.
Thanks for any help.

Here’s a screenshot of the code I used.

All the icons work for me on your published website, in the footer. Are you using some form of ad-blocker or other browser extension? Some ad-blockers are known to block social media icons. This is the one I use and it seems to have no problems with social media icons:


Try starting your web browser in safe-mode with no extensions active or try a different web browser.

You can set the size of Font Awesome icons using inline css code:

<i class="fa fa-twitter" style="font-size: 24px;"></i>

The same may be applicable for other font icon libraries too.

Links opening in new windows or tabs is widely discouraged in all instances, regardless of the destination website. Heed that advice if you wish to uphold professional standards on your website and promote better usability. Some web browsers will block new windows or popups. If you absolutely must have links in new windows, then follow these instructions and use the target attribute.

Will! You da Man!

I do have an adblocker active. Never would have thought of that in a million years. Also very appreciative of you sharing the tip about new windows. I read where you don’t want people to leave your site if they click on a link. So that’s why I wanted the new window feature. But if it’s considered to be gauche then I’ll change it for sure. Great tip!

Thank you so much for your reply.
pj

Hi @willwood. I was unaware of the target attribute. Thank you. Can you tell me how is it added when using the ‘link’ button in the RW interface?

RapidWeaver’s approach of links in new windows is to give the link a rel attribute and a value of external. That’s what happens when you check the ‘link opens in new window’ option. But it’s dependable on Javascript to make the link open in a new window, and so doesn’t always work (it tends to fall foul of popup blockers in web browsers or themes that lack the necessary code).

Unfortunately RapidWeaver will not let you add target as a custom attribute (it throws an error saying the attribute is already in use), so there is not much else you can do in the link dialogue window to force links into new windows. The target=“_blank” approach is mostly only good for links you manually setup as HTML markup, as discussed above.