Home Forums Weaver Xtreme Theme Phone & Email HTML Icon

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #73708
    Maggard_Manda
    Participant

    I am rebuilding a website for a client. On their current website in the preheader they have an envelope icon with an email address, and a phone icon with their phone number. This something they want on their new website and I cannot figure out how to do it.

    I’ve tried https://www.w3schools.com/icons/tryit.asp?filename=tryicons_fa-phone, but I just can’t figure it out. Does anyone have experience with this?

    Their Current Website:  https://blacktop-ohio.com/

    My Redesign:  https://mediadevsite7.com/

    #73709
    Weaver
    Keymaster

    Since you are already using the pre-header injection area with custom html already for the top bar, I would simply find a matching pair of phone and email image icons, put them in the photos library, and add an <img> html tag right where you already have CALL: and EMAIL:

     

    #73710
    Maggard_Manda
    Participant

    Can you elaborate on how to use html tag? Please.

    #73711
    scrambler
    Moderator

    You would need to do these with HTML and then insert it  in any of the Theme HTML Insertion areas for that.

    See the guide article for the areas.

    Layouts and HTML Insertion Areas – Weaver Xtreme Guide (weavertheme.com)

    As for the HTML you will need to source icon images and write the HTML.

    If you do not have enough html knowledge, you may want to look for plugins of wordpress.org

     

    #73712
    scrambler
    Moderator

    Actually, if you have the Xtreme Plus plugin, it has an option called Social Buttons that will insert and icon for A phone number to call and an Email to send to using a shortcode.

    It does not add the actual phone number and email address next to the Icon, but once the icons in place, we can probably use CSS to add these.

    Once the social icons have been checked and defined, the shortcode to insert them will look like

    [social font_size=30 names=mail,phone]

     

    #73713
    scrambler
    Moderator

    Once the icons in place, adding the rules below to the theme Global Custom CSS Rule box will add the text and position it

    .genericon-mail:after {content:”[email protected]”;position:relative;bottom:9px;}
    .genericon-phone:before {content:”111 222 3344″;position:relative;bottom:9px;}

    #73721
    Maggard_Manda
    Participant

    Thank you everyone. My tech support was able to do this for me.

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