Facts widget: add custom icon/image

Hello guys,

I was wondering if there’s an easy way to replace Fontawesome icons inside the Facts widget with some custom icons I have or an image (it can be an svg, png or anything else). I only need to replace the 4 icons above the text, I don’t even need a full set of icons.
I tried reverting from Pagebuilder to normal text editor to add an tag but I lose the whole layout…

Thanks

Hello there,

To replace the service’s icon with an image, you can use this CSS code:

.sydney_facts_widget div[class^="col-"]:nth-of-type(1) .fa:before {
  content: ''; /* Remove default icon */
  display: inline-block;
  width: 70px;
  height: 70px;
  background-image: url('http://yoursite.com/path/to/image.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

Replace http://yoursite.com/path/to/image.jpg with valid image link. You can use media library (Dashboard > Media) to upload the image.

:nth-of-type(1) in the code above means, the code will affect only for the service which is ordered on the first left. For the second one, use :nth-of-type(2). :nth-of-type(3) for the 3rd, and so on.

To simplify the code and avoid repeating lines, you can use below:

    .sydney_facts_widget div[class^="col-"] .fa:before {
      content: ''; /* Remove default icon */
      display: inline-block;
      width: 70px;
      height: 70px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }

    .sydney_facts_widget div[class^="col-"]:nth-of-type(1) {
      background-image: url('http://yoursite.com/path/to/image1.jpg');
    }

    .sydney_facts_widget div[class^="col-"]:nth-of-type(2) {
      background-image: url('http://yoursite.com/path/to/image2.jpg');
    }

    .sydney_facts_widget div[class^="col-"]:nth-of-type(3) {
      background-image: url('http://yoursite.com/path/to/image3.jpg');
    }

Regards,
Kharis

Hello Kharis,

thanks a lot for your reply and sorry for my delay, I was on a short vacation.

Your code works fine only as long as I use the first block. If I use your second version the image is repeated in a big squared space. But it’s not important, I don’t care to repeat a few lines of code, my CSS sheet is not huge anyways.

Thanks again, you’re a master!