Add Icon to Phone Number

Search Best Practices - Search Front-End
1

Hi Team,

A client of mine is looking to append the phone icon in front of the phone number on their location card. Would you be able to advise on how the handlebars file should be edited to support this?

As per the screenshot below, we need a black phone icon to be added in front of the phone number, let me know if this is possible. Thanks!

image

2

I resolved this by following the guide here. I set the template.hbs to the below, see the addition of the phoneIcon div:

{{#*inline 'phone'}}
{{#if card.phone}}
<div class="HitchhikerLocationStandard-phone">
 <div class="HitchhikerLocationStandard-phoneIcon">
   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M4.827 10.387a20.198 20.198 0 008.786 8.786l2.934-2.933c.36-.36.893-.48 1.36-.32a15.21 15.21 0 004.76.76c.733 0 1.333.6 1.333 1.333v4.654C24 23.4 23.4 24 22.667 24 10.147 24 0 13.853 0 1.333 0 .6.6 0 1.333 0H6c.733 0 1.333.6 1.333 1.333 0 1.667.267 3.267.76 4.76.147.467.04.987-.333 1.36l-2.933 2.934z"></path></svg>
 </div>
 <a class="HitchhikerLocationStandard-desktopMobile"
   href="tel:{{card.phone}}"
   data-eventtype="TAP_TO_CALL"
   data-eventoptions='{{json card.phoneEventOptions}}'
   target="_top">
   {{card.phone}}
 </a>
</div>
{{/if}}
{{/inline}}

I then added the following to the answers.scss file:

  .HitchhikerLocationStandard-phoneIcon {
    height: 1em;
    width: 1em;
    margin-top: .1rem;
    fill: black;
    margin-right: .25rem;
  }

The end result was as follows.

image

1 Like