Having difficulty with the icons in the slider below services section

[andreforseminole]

I am an area of difficulty as it relates to the slider below services section, the three orange call-to-action buttons on the homepage. The directions seem to indicate if I copy the names from font awesome I should be able to choose them by putting the names in place of the existing ones, however it doesn’t seem to work, they just show blank spots. The original ones reappear when I put them back in however.

I am trying to make this one for the first button, https://fontawesome.com/icons/clipboard-check?style=solid, the second button https://fontawesome.com/icons/donate?style=solid, and the third button https://fontawesome.com/icons/hands-helping?style=solid

Searching the forum for guidance I modified the header.php by adding the script <script src="https://use.fontawesome.com/c4d7d70cd9.js"></script> before the closing head tag, it did not change the issue. My website is andreforseminole.com.

Thank you

[Sonl Sinha]

Hi,

Kindly use this code in header.php

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Regards,
Chris

[andreforseminole]

Hi there Chris,
Putting in that code resolves the call-to-action icons, but then causes the social media icons at the top right of the header to stop working. Removing the code then restores the social media icons. Any other suggestions?

[Sonl Sinha]

Hi,

Kindly use services icon from here
https://fontawesome.com/v4.7.0/icons/

Regards,
Chris

[andreforseminole]

Ok using those I was able to get it working without issue. One more question, can I disable the comment counter blue box?

[Sonl Sinha]

Hi,

Kindly add this in Custom CSS box in appearance>theme options>basic settings>Custom CSS box:

.date-news .byadmin-comment {display:none;}

Regards,
Shri

[andreforseminole]

Awesome, another question, the phone number and social media icons in the header are skewed to the left on the mobile version of the site, how can I make them centered on there?

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

@media screen and (max-width:767px) {
.header-right .column1, .header-right .column2, .header-right .column3 { width:auto !important; display:table !important;}
.social-icons { width: auto; display: table; margin: 0 auto;}
}

Regards,
Chris

[Author]

Posts