Help Using Houdini For Icons/Logos In Footer


(Jonathan Brown) #1

I’m currently using the Houdini stack (in a very basic way) on my website, to include some keywords and phrases on each page of the site. I want to include a bunch of social media icons and other company logos in the same footer area. Here’s the site as it stands:

https://www.brownsphotography.com

And the kind of thing I’m looking to do can be seen in the footer/lower area of the home page of the following web site:

I’ve tried using a multi column responsive stack inside the Houdini stack, inserting image stacks one per column, then dropping the pngs into the image cells, but the icons all jumble and re-size when viewing on different devices.

If anyone can give me a pointer to the best way of doing this it would be massively appreciated.

BTW - my daughter’s hamster has more coding knowledge than I do, so any suggestions along the CSS/code route need to be very clearly explained!


(Rob Beattie) #2

What company logos do you want to use? It’ll be easier if there are existing icons for each one.


(Jonathan Brown) #3

Hi Rob. Sadly, these are logos from various organisations involved in the wedding photography industry, so not icons. I can get them as pngs or jpegs at reasonable size.


(Rob Beattie) #4

OK, so can you put the social icons in the footer and then have the company ones above the footer area but below the rest of the content?


(Jonathan Brown) #5

Yup that would work, but I want to avoid the acres of white space you’re seeing at the moment. I’m sure there’s some code I could use, but see OP about hamsters. :slight_smile:

The theme is Legacy from Michael David, if that helps at all.


(Rob Beattie) #6

This should work for the social stuff in the footer. Just add it into the Footer field in Settings/General.

<a href="http://facebook.com/"><i class="fa fa-facebook"></i></a>&nbsp<a href="http://twitter.com/"><i class="fa fa-twitter"></i></a>&nbsp<a href="http://linked.com/"><i class="fa fa-linkedin"></i></a>

You’ll need to replace the addresses with the social media address toy want to link to, and change the icons to the services you want to reference, but apart from that it’ll work.


(Rob Beattie) #7

I don’t have Legacy but I see it uses four Extra Content areas. Are you familiar with Extra Content and how to use it?


(Jonathan Brown) #8

Wow! Thanks Rob. Will have a deeper look at your code tomorrow and see how it pans out on my local test site.

Yes, I am aware of extra content areas, but have never delved into them, nor how they work.

Huge thanks for all your input.


(Rob Beattie) #9

Download the free Extra Content stack from here.

And have a quick look at the instructions. Legacy supports four EC areas and it may be that one of them sits beneath the main text and the footer, making it a good fit for your company logos.

Just drag the Extra Content stack out onto your page - doesn’t matter where - and then drop a text stack into it. Then change the setting - there’s only one - to 2 and preview. See where the text appears. Then do the same by changing it to 3, then 4, then 5. See f one of them is placed just above the footer. If it is, then that could be a place for your logos and we can move on to the next step.

Rob


(Jonathan Brown) #10

Hi Rob

OK, so I downloaded the EC stack and got it installed OK. Looking at the different EC areas, 1 appears to sit just below the header and the other 4 sit below the footer. I can contact Michael David to see if they can allow me to alter the position of one of the EC areas to sit above the footer. However, this may allow me to get what I want in terms of the logos.

I tried pasting your code as instructed, but no icons appeared, although the standard copyright phrase was gone. I looked at the theme tutorial, and Michael David do offer some guidance in this area, although their code differs slightly from yours. I’m wondering if they use different nomenclature: for instance, your reference <i class=> in your code, whereas they refer to <a class=>. Here’s a link to their tutorial page:

http://michaeldaviddesign.com/themes/legacy/tutorial/index.html

If you scroll to the bottom you’ll see where they give instructions on using the built-in sm icons.

Not sure where I go from here? Thanks for all your help so far and please don’t spend time on this; am more than happy to go back to Michael David, as their online support is pretty good, but if there is something you spot I’m doing wrong that doesn’t involve huge amounts of your time I’d be grateful for any pointers.

Thanks again


(Rob Beattie) #11

Install this free stack to add Font Awesome to your site. Just drag it out onto the page and then preview again. The codes should work then.

https://rapidweaver.marathia.com/stacks/fa4all/


(Jonathan Brown) #12

Fantastic Rob!! Works perfectly - many thanks.

Pushed for time right now, but will have a couple of (obviously, totally simplistic!!) follow ups.

Hope it’s as sunny in Hove as it is in Newcastle. Have a great w/e if I don’t get a chance to follow up later.

LL&P, JB


(Rob Beattie) #13

Glad you got it working.


(Jonathan Brown) #14

Rob, apologies for late reply - had to do some paid work…

Have been playing with your code and have successfully managed to work out how to insert spaces between the icons, and to ‘guess’ the code for Instagram.

Couple of follow ups:

Is there any way to make the icons larger?

And, is there a ‘dictionary’ or guide as to the code names for different icons? I want to use the icon for Google+ rather than just Google. Have tried a number of permutations but can only seem to get the standard Google ‘G’.

TIA for any guidance you can give.


(Stuart Marshall) #15

You can see a cheatsheet for (v4) of font awesome here: https://fontawesome.com/v4.7.0/cheatsheet/

There are a couple of ways to change the size. you can see some info here: https://www.w3schools.com/icons/fontawesome_icons_intro.asp


(Jonathan Brown) #16

Brilliant Stuart - many thanks. I’ll have a play and see what I can achieve.


(Joe Martin) #17

You could just use partials and build a complete footer.
Yell if you need help.
Sample: http://ibize.com/arched/

I updated this with your info:


(Jonathan Brown) #18

Wow! Thanks Joe, especially for going to the trouble of working up a visual for me!!

Not fully conversant with partials but it certainly looks like a good approach. Will have a dig into some tutorial stuff and see what I can come up with.

Thank you again.


(system) #19

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