Help with adding icon to a post using an Essential Grid meta tag field please!

Support
#1

Hi, I’m using Essential Grid to do a team members page on a website and one of the meta tags I’ve set up is for a telephone number. I’d like to have an icon of a phone before each number, but the only way I can do this at the minute is to put the code <font color="#2f659f"><i class="fal fa-phone" data-x-icon="" aria-hidden="true"></i></font> before each number in the field on the post, which isn’t ideal, as when it comes to my client editing it, they’re bound to accidentally delete some because it’s quite long! I wondered if there’s a span class I could add in to the telephone field and then link it to some CSS. The problem is, I haven’t got a clue how to do it! I’m hoping you’ll be able to help me out please!

Also, is it possible that when an email address isn’t entered in the field, then the envelope icon doesn’t show? At the minute it still shows even when there isn’t an email address.

I’ll put the URL in a secure note as it’s being built on a temp link.

Thanks!

#2

Hello @core365,

Thanks for writing in!

Are you adding custom meta data in your Essential grid, please check this out first:

Keep in mind that the essential grid skin editor has a limited support for icons. This is why you really have to insert the icon codes together with the phone number and the email address. When there is no email address, you do not have to add it and the icon so that nothing will display.

Thank you for your understanding.

#3

Hi, thanks for the reference links but they weren’t really much help for what I needed!

Is there a span class I could add in to the telephone field and then link it to some CSS, just so I haven’t got a big string of code before the telephone number as it won’t be simple for our client to then use <font color="#2f659f"><i class="fal fa-phone" data-x-icon="" aria-hidden="true"></i></font>

Thanks!

#4

Hello @core365,

You may use something like this:

<a href="tel:0123456789"><span  class="telephone"></span>0123456789</a>
<a href="mailto:[email protected]"><span  class="email"></span>[email protected]</a>

And then you can use a css like this:

.telephone:before,
.email:before {
    font-family: "FontAwesome" !important;;
    font-style: normal;
    font-weight: 400;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
}

.telephone:before {
  content: "\f095";
}

.email:before {
  content: "\f199";
}

We would love to know if this has worked for you. Thank you.

#5

Hi @runel,

It has worked! It’s spot on, thank you!

Many thanks for your help and time on this!

#6

You’re welcome, @core365. Glad we’re able to help.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.