Add Icon to Phone Number

Search Best Practices - Search Front-End
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