Okay
  Public Ticket #1803317
Social network icons in a page?
Open

Comments

  •  1
    Julien started the conversation

    Hello,

    In my contact page, I would like to add 4 links to social networks (the same as those of the footer).

    I first tried to add icons (available in WPBakery) that point to the URL of the pages. It worked well, but I had to create columns for these icons to be side-by-side, but they were placed below each other on a smartphone screen.

    So, I created these icons in JPEG, and placed them side by side in a block of text by assigning each a URL. It suits me perfectly, except that as these icons are JPG images, it pixilates if we zoom on the page.

    Do you know how can I replace these images in pixels with vector images?

    Thanks in advance,

    Julien

  •  186
    Dev replied

    Hi there, 

    Use a HTML block from Page Builder and edit and include this

    <ul class="social-icons">
                
        <li>
          <a href="YOUR_URL" target="_blank">
            <i class="fa fa-facebook"></i>
          </a>
        </li>
        <li>
          <a href="YOUR_URL" target="_blank">
            <i class="fa fa-instagram"></i>
          </a>
        </li>
        <li>
          <a href="YOUR_URL" target="_blank">
            <i class="fa fa-pinterest"></i>
          </a>
        </li>
        <li>
          <a href="YOUR_URL" target="_blank">
            <i class="fa fa-500px"></i>
          </a>
        </li>
    </ul>
    

    owwwlab's Developer Team representee

  •  1
    Julien replied

    Excellent, thank you very much!

    However, is it possible to choose the size of these icons? I find them currently too small.

    thank you,

    Julien

  •  186
    Dev replied

    Thanks

    Add these to your Customizer > Additional CSS:

    #post-235 .social-icons a {
       font-size: 24px;
       padding: 6px 12px;
    }
    @media (max-width: 992px){
        #post-235 .social-icons a {
            font-size: 24px;
        }
    }
    

    #post-235 makes it specific for that page only. So if you delete the page and create new contact page you need to change that ID.

    owwwlab's Developer Team representee

  •  1
    Julien replied

    Great thanks a lot !

    Do these icons update when the social network decides to change it?

    (for example, the 500px icon is out of date)

  •  186
    Dev replied

    It uses Fontasweome iconslibrary v4.7. We will update it later when the Page Builder Plugin gets updated.

    owwwlab's Developer Team representee

  •  1
    Julien replied

    Great thanks a lot!