How to create new social icon which behaves as the rest do in RW8 theme?


(BRHolmes) #1

Difficult to title this -
I don’t need to know how to create a new icon, what I need to know is how to add a new social icon
which behaves exactly as the rest of the prepackaged ones do in my theme (White Space by Gumroad).

I’d link to a preview of White Space for RW here, but my experience is that adding links in this forum leads to idiots flagging posts as “spam” and my whole post is censored.

I need a “band camp” social icon added, it’s about the only one missing. From the White Space manual:

The Social Icons

In White Space you can add your own social icons by just inserting links anywhere on your page and give it the proper class. Here is a list of all available social icon classes:

facebook, twitter, rss, googleplus, linkedin, dribbble, youtube, flickr, skype, tumblr, foursquare, instagram, pinterest, email, soundcloud, reddit, delicious, lastfm, vimeo, yelp

And here is how you setup the links correctly:

1. Mark the text you want to transform into a button (the text doesn’t matter)
2. Click on the “Add Link” button in RapidWeaver (depends on the page type you use)
3. In the window that appears, set up your link as you would for a normal link (defining the link target) 4. In the Custom Attributes section, add an attribute with a name of class and in the value field, enter the correct class name (see above)

Now, if you did the steps above correctly, the social links should be shown as circles at the right side of your page.

Icons with Font Awesome

White Space includes the famous Font Awesome font library to create icons. Whenever you want to add an icon to your page, just insert the following piece of HTML code:

<i class=“fa fa-envelope”></i>

When you switch to Preview mode you will see an icon of an envelope where you inserted the code. Font Awesome includes over 400 icons. Please visit the project site to see what icons are available and what code you need to insert. The site can be found at:

The instructions are somewhat opaque on how to add a social button which behaves exactly as the included ones, and how to add a new class for this button. In the theme, the existing social buttons when added to the side bar will sit on the side and remain static when the page scrolls:

You cannot see any code pertaining to them when viewing the page with the little pencil icon - all you can see is the main content you have added. Hence there is nowhere to add any code to refer to new buttons that I can see:

(in the above image you can see I’ve obviously tried to take the manual literally and insert a class which will bring up that little envelope logo when I preview the page - of course all that happens is the button is missing).

Re:

<i class=“fa fa-envelope”></i>

Where on earth is that code supposed to go, given what I’ve explained?

I’ve downloaded the .SVG for band camp but where the heck does that go, when I can’t identify where the prepackaged social icons are?

I tried hunting for the whitespace theme file within the package contents of Rapidweaver to manually add the social icon, but it’s nowhere to be found…

Thanks for reading. I’ve tried reaching out to the creator but no response - have resubmitted a ticket just now but not expecting much.


(Rob Beattie) #2

The creator is Rapid Ideas. Have you been in touch with them? https://www.rapid-ideas.com/

Why download an SVG for Bandcamp when there’s a Font Awesome icon available for it? That’s what the theme is designed to use. See here - https://fontawesome.com/v4.7.0/icon/bandcamp

Try following the instructions again using the Font Awesome Bandcamp code and see what happens.

HTH

Rob


(BRHolmes) #3

Thanks - I have submitted a ticket to them, but no response as yet.
I tried my best to explain - I have no idea how to apply the font awesome icon and code to a component of
my theme for which I cannot see the code. The screen shots hopefully illustrate. I don’t want to just throw in a button somewhere on the page, I want to add a social icon button to the repertoir of icon buttons which the theme comes with, and have it behave exactly as the others (the details of the behaviour I want are in my post above). Not sure how else I can explain… the theme has every social icon button except bandcamp. I can’t work out how to add a class of “bandcamp” and associated social icon button to its repertoir.


(Rob Beattie) #4

I’m sure it’s possible - see attached. I’ve sent you a private message.

Robscreenshot_194


(Rob Beattie) #5

Hiya,

I’m afraid it’s beyond my limited skill set after all. The best way forward is to convince the author to add Bandcamp to the list of supported social icons - or ignore the way the theme handles them completely and use something like Stacks4Stacks’ Sharestack to add them yourself and place them wherever you like. I know it’s frustrating not to be able to use the theme’s features, but I’m not sure what else to suggest.

Good luck!

Rob


(BRHolmes) #6

Thanks Rob. I’ll bump the thread in the meantime… Cheers!


(system) #7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.