Home>Support>Custom Icon in Footer

Custom Icon in Footer

By Jose AMezcua, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hello again Site Origin Theme,
hope you are all doing great! I come to you again seeking your mighty advice; I need to add an affiliate link at the footer of http://electricaixtapa.com/ (currently under development).

The arrangement is the following: Big Responsive Icon + Text aligned to the right of the icon.

I have 2 options (that I know about):

1- use vantage features widget: Choosing this option implies I need to add some custom CSS that only affects the features widget on the footer and not the ones on the website to align the text to the left. ¿What is that CSS I need to add?

2- Add a custom svg icon: Using my limited coding skills I unsuccessfully tried to add an svg icon from: http://iconmelon.com/; ¿How can I do this? (I was thinking about using a blank plugin template, load the svg code and add the css to custom css, then use a shortlink)

*I need to do the same for 6+ websites so this should be as easy to replicate as posible and 100% responsive.
**The icon should have no background (container)
***I would like to modify the text/hover effect for the footer widget specifically.

again, thank you for the great theme and support!
J.

URL: http://electricaixtapa.com/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 4 months ago Andrew Misplon
    Hi, I Work Here

    Hi Jose

    Thanks for reaching out. To start from the top:

    The footer widget area splits into columns as you add widgets. Two widgets = two columns.

    The Layout Builder widget can be used in the footer. Use that for more advanced layouts. It will allow you to build a Page Builder style layout within a widget area.

    For example, with the Layout Builder you could add a two column layout and insert a Visual Editor widget into each column. The Visual Editor widget allows you to add text or images.

    Using the Text tab of the Visual Editor widget you could add an icon from Font Awesome, for example:

    <i class="fa fa-anchor"></i>

    Ref: http://fontawesome.io/icon/anchor/

    Once you have the basic setup ready we can assist with sizing and or hover effects.

  2. 10 years, 3 months ago Jose AMezcua

    Hello Andrew,

    setup is done. Tried using the visual editor to insert the icon but couldnt do it so I inserted it to a text widget. How can I do the customization? Add the link to the icon? Hover effects? Is there a way to edit , , text styles but only for the footer? Without affecting the whole site?

    Thanks,
    J

  3. 10 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Thanks. I can help once things are up. Did you switch to the Features Widget in the far right corner?

    http://electricaixtapa.com/

    Is that what you’re now looking to customise further?

  4. 10 years, 3 months ago Jose AMezcua

    Hey andrew, sorry I tried the setup in another site, here is the correct link: http://luxesdesigns.com/

    thanks,
    J

  5. 10 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Sure. The icon is entered as follows:

    <i class="fa fa-shopping-cart fa-5x"></i>

    You can target it by adding a wrapper and a link:

    <div class="footer-icon">
	<a href="http://google.com">
	<i class="fa fa-shopping-cart fa-5x"></i>
</div>

    Replace my link with yours. Then under Appearance > Custom CSS:

    .site-footer #footer-widgets .widget .footer-icon a {
color: blue;
}

.site-footer #footer-widgets .widget .footer-icon a:hover {
color: red;
}

    Change blue and red to the hexadecimal colors you require.

  6. 10 years, 2 months ago Jose AMezcua

    Hey andrew,
    sorry for the late reply, its all been working great! I implemented this solution in http://inologyc.com/

    but it seems I missed something because the link from the Icon is affecting my links under: Site Information Text

    Ive been adding at the end of everything but its not working. :o

    Thanks,
    J.

  7. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi Jose

    I’m up a little late, can you bring me up to speed. Is the problem visible here:

    http://inologyc.com/

    To confirm, we’re adding footer icons with link colors to the footer widget area?

  8. 10 years, 2 months ago Jose AMezcua

    Andrew,

    Yep, the problem is in the colophone, (Site info Text)

    Here is the text I placed in the Site Info Field:

    <p style="text-align: center">© 2015 INOLOGYC MEXICO S.A de C.V. Todos Los Derechos Reservados

 
<p style="text-align: center"><a href="http://www.servicioswebmex.com">Sitio Web por Servicios Web de México </a>

    You see the first paragraph has no link but it is inheriting the link from the last Item of the footer (the one I used the css posted previously here)

    Here is the text added to the footer widget:

    <h1>¡Compra en línea artículos de Iluminación con envío a todo México !</h1>
<div class="footer-icon">
	<a href="http://tienda.tecnolite.com.mx/?utm_source=Enlaces%20Afiliados&utm_medium=link&utm_content=11374&utm_campaign=Mexico">
	<i class="fa fa-shopping-cart fa-5x"></i>
</div>
Tenemos increíbles precios y descuentos ¡Entra ahora!

    I don´t know what I miss but it looks like a div is not closed or something. (I already added at the end of everything without result :/ )

    PS. How can I center the icon? And how can I add a padding so that the image in the first footer widget is floating in the center vertically talking.

    BTW, congratulations on de snippet library for the custom CSS, starting to look like MUSE!
    Thanks,
    J

  9. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Thanks

    Site Information Text

    I’ve tested the HTML you sent. It seems to be working fine in my demo:

    <p style="text-align: center">© 2015 INOLOGYC MEXICO S.A de C.V. Todos Los Derechos Reservados

 
<p style="text-align: center"><a href="http://www.servicioswebmex.com">Sitio Web por Servicios Web de México </a>

    I’m not sure why that’s happening on your side. Could you try delete that field and insert the HTML one more time?

    Footer Text Widget

    There is a missing a tag close. Try replace your HTML with the below:

    <h1>¡Compra en línea artículos de Iluminación con envío a todo México !</h1>
<div class="footer-icon">
	<a href="http://tienda.tecnolite.com.mx/?utm_source=Enlaces%20Afiliados&utm_medium=link&utm_content=11374&utm_campaign=Mexico">
		<i class="fa fa-shopping-cart fa-5x"></i>
	</a>
</div>
Tenemos increíbles precios y descuentos ¡Entra ahora!

    That will hopefully fix the problem in Site Information Text too.

    Try the following under Appearance > Custom CSS to start adjusting your footer icon:

    #colophon .widget .footer-icon {
padding: 10px;
text-align: center;
}

    Hope that helps.

    Other

    Glad to hear you like the snippet library. It’s been a long time coming. We’ll get some more useful snippets in there ASAP.

  10. 10 years, 2 months ago Jose AMezcua

    Andrew,
    great it works like magic. Thank You very much.
    I ran into a new issue, what if Im trying to add 2 icons, having them aligned horizontally, is this posible?
    Thanks,
    J

  11. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Sure :)

    You could try aligning each as an inline-block:

    #colophon .widget .footer-icon {
display: inline-block;
padding: 10px;
text-align: center;
}

    If you put two up I can take a better look.

  12. 10 years, 2 months ago Jose AMezcua

    Andrew, done!
    It works, I’m trying to get two social media icons in the last text widget on the footer but it only shows one, any idea?

    <a href="http://tienda.tecnolite.com.mx/?utm_source=Enlaces%20Afiliados&utm_medium=link&utm_content=10786&utm_campaign=Occidente" target="_blank">Focos, Leds, Lámparas, Candiles. Los mejores productos a la puerta de tu casa, compra seguro, rápido y al mejor precio sin salir de tu casa.</a>


<a href="http://tienda.tecnolite.com.mx/?utm_source=Enlaces%20Afiliados&utm_medium=link&utm_content=10786&utm_campaign=Occidente" target="_blank">COMPRA YA DANDO CLIC AQUÍ ➞</a>



<div class="footer-icon">
	<a href="http://tienda.tecnolite.com.mx/?utm_source=Enlaces%20Afiliados&utm_medium=link&utm_content=11374&utm_campaign=Mexico">
		<i class="fa fa-twitter-square fa-3x"></i>
	</a>
</div>

<div class="footer-icon">
	<a href="http://tienda.tecnolite.com.mx/?utm_source=Enlaces%20Afiliados&utm_medium=link&utm_content=11374&utm_campaign=Mexico">
		<i class="fa fa-facebook-official fa-3x"></i>
	</a>
</div>

    Thanks,
    J.

  13. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Thanks. Please could you try clearing your caching plugin and see if that makes a difference?

  14. 10 years, 2 months ago Jose AMezcua

    Hey Andrew,
    I cleared the caché, no result. So I ended up deleting the plugin but still no result.

    any other suggestions?
    Thanks,
    J

  15. 10 years, 2 months ago Jose AMezcua

    Hey Andrew, I tried to add both icons to the contact page also but it dosent seem to work either, the first icon is displayed but the second one is not. I did not use gifs or anything, just copy and pasted the icon shortcode from font awesome.

    Check it out: http://iluminadot.com/contacto/

  16. 10 years, 2 months ago Magus
    Hi, I Work Here

    Hi Jose, Andrew

    I hope you don’t mind me jumping in here. I have inspected the page and the facebook icon you are trying to show does not seem to exist.

    If you change this line

    <i class="fa fa-facebook-official fa-3x"></i>

    to this

    <i class="fa fa-facebook  fa-3x"></i>

    then it works as expected.

    Hope this helps

    Magus

  17. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Nicely spotted Magus :)
    Hope that helps Jose. Let us know how it goes.

  18. 10 years, 2 months ago Jose AMezcua

    So lets blame this one on http://fontawesome.io/icon/facebook-official/ since I found it there!

    Andrew and Magus, thanks for all the help, this is now solved!

    PS:If any of you could help me out with this: Thread: Custom Menu Item (changes)

    Id be really thankfull!
    J.

  19. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Super, glad that did the trick.

    For sure, we’ll jump in there ASAP.

  20. 10 years, 2 months ago Jose AMezcua

    Hey Andrew, Magus, everyone;

    How can I make the first element of my footers (it is a site origin image widget) float in the center like all the other so that it all looks centred.
    Thanks,
    J

  21. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi Jose

    Using the Layout Builder widget would be the easiest way to handle this.

    If you’d like to try doing this with CSS you could try:

    #colophon aside:first-of-type {
float: none;
margin-bottom: 25px;
width: 100%;
}

#colophon aside:first-of-type > div {
margin: 0 auto;
width: 50%;
}
Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More