Service Icon


#1

hello

is there anyway to change service icon from codes ‘’ fa-wheelchair’’ to image i select ?


#2

Hello there,

Thank you for getting in touch.

In order to achieve that objective, you should need to add the following CSS code via the Simple Custom CSS plugin or child theme’s style.css file.

.fa-wheelchair:before {
  content: ''; /* Remove default icon */
  background: url('http://icons.iconarchive.com/icons/iconsmind/outline/256/Wheelchair-icon.png') center center no-repeat;
  background-size: 100%; 
  display: inline-block;
  width: 30px;
  height: 30px;
}  

Replace the image URL http://icons.iconarchive.com/icons/iconsmind/outline/256/Wheelchair-icon.png to your own. You might need to upload it to the media library. From Dashboard, go to Media > Add New.

I hope this reply helps.

Warmest regards,
Kharis


#3

yes it changed but the circle is small… i want take away red circle and put image big one …
visit Graphicmotion.se
scrw down to OUR HEAH ALL HEAH IN HEAH
Heah1


#4

http://www.graphicmotion.se/


#5

Hello there,

To resize the icon size, try to adjust the width and height property values.

.fa-wheelchair:before {
  content: ''; /* Remove default icon */
  background: url('http://icons.iconarchive.com/icons/iconsmind/outline/256/Wheelchair-icon.png') center center no-repeat;
  background-size: 100%; 
  display: inline-block;
  width: 30px; 
  height: 30px;
} 

From the code above, the size is 30px by 30px.

Warmest regards,
Kharis


#6

i did re sized it and it works but then icon is more biger than the red cerical what i meant is the hole size of it …Thanks again


#7

Hello there,

Could you please try the following?

.roll-icon-list .icon{
    width: 100px;
    height: 100px;
    line-height: 100px;
}

.roll-icon-list .icon .fa{
    line-height: 100px;
}

You should need to make an adjustment as needed.

I hope it helps.

Warmest regards,
Kharis