[Support request] Footer Customization

Home Forums Support Footer Customization

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1356056

    I want to achieve this: https://optimization-my.d.pr/CkWcih

    1. I am using the Element footer hook for this part. How do I float the 2 buttons to the right side?

    2. How do I add the separating lines? Do I add border top & bottom to the footer main?

    3. How do I add the icons to the Address, phone and Emai1? I saw guides to add FA to menu items, but not to HTML text

    Customer Support

    Hi there,

    1. You can use Auto Margins to force the footer-btn-1 over like so:

    .footer-btn-1 {
        margin-left: auto;

    2. This CSS:

    .footer-widgets-container {
        border-bottom: 1px solid #fff;

    3. You can include them in your HTML exactly the same way you would in a menu item eg.

    <i class="fa fa-home" aria-hidden="true"></i> More HTML


    OK, great. It worked!

    For number 3, how do I get it floating on the left of the information, similar to https://optimization-my.d.pr/CkWcih

    Customer Support

    I would use a HTML Widget instead of a text widget – it’s less likely that WP will insert unnecessary <p> tags.

    Then create my markup like this:

    <div class="info-widget">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" id="svg-replaced-0" class="style-svg replaced-svg svg-replaced-0"><path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path></svg>
        <div class="info-content">
            <strong>CLAPAM (PPM 007-14-01101993)</strong><br>
            Box # 611, Lot 4.46A, 4th Floor<br>
            Wisma Central, Jalan Ampang<br>
            50450 Kuala Lumpur</p>

    And this CSS for alignment:

    .info-widget {
        position: relative;
        padding-left: 30px;
    .info-widget svg {
        position: absolute;
        left: 0;
        top: 0;

    Great, that worked perfectly!

    Pardon my ignorance, how do I get the SVG codes for the phone and envelope too? Is it using the ones from Font Awesome?

    Customer Support

    Yeah you can download the free SVG icons here:


    Then simply open them in a text editor / IDE to get the <SVG> code OR open them in this site:


Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.