Phone icon top bar

Support
#1

Hello.

We need to make a couple of changes on the top bar.

  • We need to change the direction of this phone icon… so that it’s “faces” right rather than left like it currently is… please see screen-shot:

  • We need to make the font on the top bar “Ubuntu” like it is on the rest of the site.

Thanks for the help!!

#2

Hi,

To achieve that, please separate your number from your icon.

eg.

<i class="x-icon x-icon-phone" data-x-icon-s="" aria-hidden="true"></i> (506) 1234-5678

Then add this in Theme Options > CSS

.x-topbar .x-icon.x-icon-phone {
 -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.x-topbar .p-info,
.x-topbar .p-info a {
  font-family: "Ubuntu",sans-serif;
}

Hope this helps

#3

Thank you!

It worked great! … alternatively, can I just use another phone icon in place of the current one?

Thanks!

#4

Hi again,

Yes you can change the icon by changing your code to this:

<i class="x-icon x-icon-mobile-alt" data-x-icon-s="&#xf3cd" aria-hidden="true"></i> (506) 1234-5678

You can find out the icon codes here https://fontawesome.com/icons?d=gallery&q=phone and change the data-x-icon-s in the above code as per your need.

Hope this helps!

#5

Thank you very much for all your help!

#6

You are most welcome. :slight_smile:

#7

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