How to change icons on my services page?

Is it possible? I know that I can change them by changing an icon’s code using https://fortawesome.github.io/Font-Awesome/cheatsheet/ but what should I do when I want to have a completely different icon which is not present at that site? Is it possible by editing the CSS?

Hello there,

Yes, it is possible. You must find the exact selector of the icon that you wish to change. For instance:

.fa-camera-retro:before{
  /* CSS declaration goes here */
}

is selector for camera icon as seen at our demo.

Regards,
Kharis

Excuse me my reading comprehension but can you please explain it a bit more. (I am not a native English user so maybe that’s why) I assume I have to find this selector in a theme editor? And what do you mean by “CSS declaration goes here”? Do I have to put a link to my icon here? Thanks and sorry again

Hello there,

I would like to apologize in advance for I couldn’t explain it well.

> I assume I have to find this selector in a theme editor?

You don’t have to. You can find the Font Awesome class name by using the browser’s inspector tool https://cloudup.com/c2aX9_l4lqu. I was using Firefox.

Now you can replace the default icon by writing a couple CSS style rules.

Try to insert the following custom CSS code through the Simple Custom CSS plugin or child theme’s style.css.

.fa-camera-retro:before{
  content: ''; /* Remove default icon */
  display: block;
  width: 32px;
  height: 32px; 
  background-image: url('http://yoursite.com/path/to/your-image.png');
  background-size: contain;
  background-position: center center;
  margin-top: 17px;
}

Replace http://yoursite.com/path/to/your-image.png to the absolute path of your image. You would need to upload your image to the media library (Dashboard > Media > Add New).

Regards,
Kharis

Thank you, I understand now and it works. Thanks again. And sorry but I’ve got another question, is it possible to change aforementioned icons together with the circles around them? Basically i want to get rid of the circles, leaving just my new icons.

Hello there,

To get rid of the circle, try to apply the following CSS code:

.roll-icon-box .icon{
    border: none;
}

Regards,
Kharis

Hi there,

How to remove a circle around icon behind brick’s picture in Service B?

URL of site: https://trophallactic-polis.000webhostapp.com/

Thank you,
Nikola

Hello there,

You can remove it by adding the following custom CSS code:


.roll-icon-list .icon {
  border: none;
}

Regards,
Kharis

Dear Kahris,

I would also like to use a different icon, I tried to follow your instructions above but it seems I am doing something wrong… I never worked with CSS so far, I installed the Simple Custom CSS and I have the Font Awesome class name, which in my case would be for example: fa fa-envelope-open (my website is still in progress, its: http://hawasafaga.com

so I copied your code from above and inserted it to the custom css, but nothing changes…is it supposed to look like this:

.fa fa-envelope-open:before{
content: ‘’; /* Remove default icon */
display: block;
width: 32px;
height: 32px;
background-image: url(‘http://yoursite.com/path/to/your-image.png’);
background-size: contain;
background-position: center center;
margin-top: 17px;
}

I replaced the URL with the URL of my icon which I uploaded first to my media library.

I would really appreciate an answer!

Thanks a lot,

Tina

Hi Tina!

Change to
.fa-envelope-open:before{
content: ‘’;
[…]

and always if does not work force code with “!important;” at the end of each instruction which could not work.
Like that: background: url(‘http://yoursite.com/path/to/your-image.png’) !important;

Good luck!

Hey there,

thanks a lot for responding, unfortunately nothing changed, no matter if I put .fa fa-envelope-open OR .fa-envelope-open

and I tried to force the code but that also didn’t help, I even put it after each instruction

.fa-envelope-open:before{
content: ”; /* Remove default icon */
display: block !important;
width: 32px !important;
height: 32px !important;
background-image: url(‘http://hawasafaga.com/wp-content/uploads/2017/03/Windsurfing-26.png’) !important;
background-size: contain !important;
background-position: center center !important;
margin-top: 17px !important;
}

Hi Tina,

I found some bugs in your code. Please use the following:


.fa-envelope-open:before{
  content: ''; /* Remove default icon */
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  background-image: url('http://hawasafaga.com/wp-content/uploads/2017/03/Windsurfing-26.png') !important;
  background-size: contain !important;
  background-position: center center !important;
  margin-top: 17px !important;
}

Be sure that your image URL is valid.

Regards,
Kharis

Hey Kharis,

I copied and inserted your code but still no change, and the url of my picture is definitely valid. I don’t know why it is not working, I also tried inserting other codes like the one to remove the circle around the service icons but that also doesn’t work, so I guess the code is not the problem but something else… Could it maybe have something to do with the child theme I installed, I got the one from the NYCTechClub Tutorial on YouTube.

Did you copy the code seen in the email? Please visit use the code as posted on this thread.

Regards,
Kharis

I was just going to write you that I did copy your code from your thread before but wanted first to try it again, and now it suddenly works!!! I am not sure why, I tried so many times and I always copied your code… The only thing I can think of that has changed from before is that I just created a menu… Don’t know, but thank you so much for your help!!

You are doing a great job!

Hello - I’ve tried this, and the code doesn’t erase the default icon. MY new icon just appears underneath the default icon. I’ve copied and pasted the code numerous times and both icons still appear.

I’m trying to replace the fa-bomb icon under the ‘Killington Features’ section on this page:

Please help! I don’t know what I’m missing.

Thanks

Jen

Hello Jen,

You need to add an !important argument to set the highest priority code execution. So your code block will look like this:


.fa-bomb::before {
    content: '' !important;
    display: block;
    width: 32px;
    height: 32px;
    background-image: url('http://thelakewoodhouse.com/wp-content/uploads/2017/03/golf.png');
    background-size: contain;
    background-position: center center;
    margin-top: 17px;
}

Regards,
Kharis

That worked! Thanks for clarifying!

Now, is there anyway to get the color of my icon to match the rest? or should I just change the color of the image outside of wordpress and upload it already matching?

Thanks so much for your speedy help - LOVE this theme!

Jen

Since you use icon images, you have to color your images then reupload them.

Regards,
Kharis