Icons

  • Hey,

    Great plugin that I will make good use of.

    I’ve been working on trying to include a couple of Fontawesome icons, placed before the phone number and the email address. That in itself is not a problem. However, they appear even under employees that do not have a phone number or email address listed, which is not what I want, exactly. I have added the phone number in a <p> tag, For the phone icon, the tag <i> holding the fontawesome icon was placed inside the <p> tag, and for the email, the <i> tag was placed just before. Can you help me only make them appear when there is in fact a phone number or email listed for that employee?

    Thanks in advance.

Viewing 1 replies (of 1 total)
  • Plugin Author Brett Shumaker

    (@brettshumaker)

    Hi @videncentret –
    One way you can work around this is to add an attribute to the <p> tag populated with the phone number then target <p> tags with that attribute empty and hide them.

    Your markup could look something like this:
    <p data-phone="[staff-phone]"><i class="fa fa-phone"></i> [staff-phone]</p>

    Then your CSS would look like this:

    .staff-member p[data-phone=""] {
    display: none;
}
Viewing 1 replies (of 1 total)
  • The topic ‘Icons’ is closed to new replies.