Creating my own Service Icons

I’d like to use my own icons to appear on my services pages. I will create them in Adobe Illustrator and need to know the following:

Size - 200 px x 200 px (?)
Color - should I make them the color that I prefer them to appear in?
File - what type of file should I export? (JPG, PNG, etc.)

and finally, how do I get the individual icons I’m going to create to show?

Thank you.

Andy

Hello Andy,

To accomplish it, you’d have to add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .athemes_services_widget .services-item .services-icon > i {
      content: '';
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    .athemes_services_widget .services-item:nth-of-type(1) .services-icon > i {
      width: 200px;
      height: 200px;
      background-image: url('https://yoursite.com/path/to/service-image.png');
    }

The code above will remove default icons and replace the first one with https://yoursite.com/path/to/service-image.png. You can upload your PNG image to media library (Dashboard > Media > Add New).

The new image icon will present only if default icon class name presents.

For second service’s image, add this CSS code:

    .athemes_services_widget .services-item:nth-of-type(2) .services-icon > i {
      width: 200px;
      height: 200px;
      background-image: url('https://yoursite.com/path/to/service-image-2.png');
    }

For third one:

    .athemes_services_widget .services-item:nth-of-type(3) .services-icon > i {
      width: 200px;
      height: 200px;
      background-image: url('https://yoursite.com/path/to/service-image-3.png');
    }

Regards,
Kharis