Service icon images

Hi!

Is it possible to use something else than the Font Awesome icons in the Service icons? In a perfect world I would love to upload my own small circles with images.

It’s the three “Why choose us” elements on my frontpage, I would like to change:
https://levendestreg.dk/en/ (three rows down)

Best regards, Maria

Hello Maria,

Firstly upload your images to your site’s media library (Dashboard > Media > Add New).

Then use this simple CSS code to remove default icons and call your custom images.

    .sydney_services_widget .service .icon > * {
      opacity: 0;
    }

    .sydney_services_widget .service .icon {
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100%;
      border: none;
    }

    .sydney_services_widget .service:nth-of-type(1) .icon {
      background-image: url('https://yoursite.com/path-to-image-icon-1.png');
    }

    .sydney_services_widget .service:nth-of-type(2) .icon {
      background-image: url('https://yoursite.com/path-to-image-icon-2.png');
    }

    .sydney_services_widget .service:nth-of-type(3) .icon {
      background-image: url('https://yoursite.com/path-to-image-icon-3.png');
    }

Replace https://yoursite.com/path-to-image-icon-1.png, https://yoursite.com/path-to-image-icon-2.png and https://yoursite.com/path-to-image-icon-3.png with your image path URLs taken from media library.

Regards,
Kharis

THANK YOU SO MUCH! So happy I choose aThemes!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis