Custom Footer Code


(Jimmy Chainey) #1

Hi Guys,

I want to create a custom footer. I am using the Split theme and I’m happy with the size of the footer.

I now want to add a few images with links (social media icons) and maybe some text. I have all the pngs for the icons I want to use… how would I add them so that they show up in the footer? I know where the footer master setting is… just not how to code it properly

Does anyone have any custom footer examples with accompanying code so that we can share ideas a bit? New to this Rapidweaver HTML thing!


(Robert Ziebol 🖖🏼) #2

You can always put HTML code into the footer area. If the Split theme loaded Font Awesome, you could easily put FA icons in the footer, but since it does not, you would have to use a stack, like Joe’s Font Awesome stack to add that ability to your page. Just leave the icon name blank in the Font Awesome settings and you are good to go. You can see it here
http://www.zeebedesigns.com/split-footer-icons/
I just used this HTML in the footer area:
<i class="fa fa-facebook-official fa-lg"></i> <i class="fa fa-twitter-square fa-lg"></i> <i class="fa fa-instagram fa-lg"></i>
As you can see here:


Adding content to footer in Flood theme
(Stuart) #3

Great idea to enrich the footer area with Font Awesome icons, @zeebe.

Something about the OP’s wording made me think, however, that they might not be using Stacks. If that were the case then simply adding this one liner to the HEAD code container either at page level or project wide, will allow you to use Font Awesome assets straight away:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


(Scott Steven) #4

This is messy and I have broken things by accident with footers. I have now moved on to using Joe Workmans Houdini Stack. I then use Pluskit to and text stack and put it on all my pages. Why

1st I can create any kind of footer I want with houdini with stacks
2nd if I change the footer plus kit takes care of updating all the pages


(Oscar Schmid) #5

I used this code in footer. But it must be a stacks page with the FontAwesome stack from Joe Worman, as @zeebe wrote, or @kryten 's code in header section.
Or the theme support this feature!

With my code the icons are linked to the desired website.

<a href="http://www.desired_site.ch"><i class="fa fa-camera-retro fa-lg"></i></a>


Split Theme - Getting images to scale to the width of the site
(Oscar Schmid) #6

Thank you @kryten for the code to FontAwesome. It’s much easier than integrate FontAwesome myself in the resources :wink:


(Jimmy Chainey) #7

Hi Guys @kryten, @Oscar, @zeebe,

This is cool - thanks so much for all the brilliant info.

Can someone please run me through step by step how I add font awesome as a stack on my page and then implement what we are talking about?

@scottsteven - have you got an example of what you have created with Houdini stack? might go down that route but not sure how to add that stack to my page and then use the other stacks along with it?

#NOVICE !!!


(Robert Ziebol 🖖🏼) #8

@JimmyChainey unless you have already purchased the Font Awesome stack, I would do what @kryten suggests, put this code in the head, like this:

This way you can have Font Awesome on non-stacks pages.

If you already have the Font Awesome stack and are only using Stacks pages, let me know and I can give you a walk through on that.


(Jimmy Chainey) #9

GAAAH THIS IS SO AWESOME! Thank you man!

One last question, I’ve added the suggested code in the header, and then the footer code that you suggested…

How do I now may the Icons bigger? Similar to @Oscar suggestion above?


(Jimmy Chainey) #10

Don’t worry bro! I’ve worked it out - thanks so much guys - you have been awesome


(Robert Ziebol 🖖🏼) #11

Glad you got it working!


(Oscar Schmid) #12

There are two ways to set bigger icons. (perhaps three , four , five ;))

<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro" style="font-size: 64px;"></i>