- This topic has 6 replies, 3 voices, and was last updated 2 years, 9 months ago by
.
-
Posts
-
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/
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:
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
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]
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;}
- You must be logged in to reply to this topic.