Avada Forums Community Forum Custom Social Icons for Email and Phone (with modals)

Tagged: 

Viewing 1 post (of 1 total)
  • Author
    Posts
  • FlorenceG
    Participant
    Post count: 11

    I love the ease of use of the social media icons in Avada. But if you want to use them for bios (for companies or employees) they are lacking, since there is no option Phone, Website or Email. So I decided to just HTML it instead and share the code here, in case anyone else wants to use it. For the emails and phone numbers I have modals setup that either make a contact form or a phone number pop up.

    I used images for the actual icons within the buttons. I also removed the tooltips, since you can only set the data-toggle to either modal or tooltip.

    For email (with modal):
    <a class="fusion-social-network-icon fusion-tooltip fusion-icon-Custom icon" style="color: #ffffff; background-color: #8c95a3; border-color: #8c95a3; border-radius: 4px;" title="" target="_self" rel="noopener noreferrer" aria-label="Custom icon" data-placement="top" data-title="" data-toggle="modal" data-target=".fusion-modal.YOUR-MODAL-NAME" data-original-title="Email"><img src="YOUR-IMAGE-LINK" alt="Email" width="30" height="30" /></a>

    For websites (just with a link):
    <a class="fusion-social-network-icon fusion-tooltip fusion-icon-Custom icon" style="color: #ffffff; background-color: #8c95a3; border-color: #8c95a3; border-radius: 4px;" title="" target="_blank" rel="noopener noreferrer" href="YOUR-LINK" aria-label="Website" data-placement="top" data-title="" data-toggle="" data-original-title="Website"><img src="YOUR-IMAGE-LINK" alt="Website Link" width="30" height="30" /></a>

    With this you can create whatever social links you like. Place them on your website within this code:

    <div class="aligncenter">
    <div class="fusion-social-links">
    <div class="fusion-social-networks boxed-icons">
    <div class="fusion-social-networks-wrapper">
    
    </div>
    </div>
    </div>
    </div>

    Hope this helps someone!

Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.