Inserting Icon Image before Header Title - Forum | JoomShaper
Staff replied SP Page Builder

Inserting Icon Image before Header Title

Asked by David Rogers 2 years ago Last activity 2 years ago

Hi, I would like to insern a customised Icon Image before the heading title.

I cannot seem to figure out how Icofont or Icomoon work and I suspect they cannot convert to images.

Is there any way I can do this with CSS? (Please see example or how i want it to look)

https://imgur.com/a/ELsXfz3

5 replies

David Rogers Asked this
2 years ago · edited

Thank you, already read those. The problem is:

Icofont does not have instructions on how to do anything apart from download the icons that are already there

IcoMoon only seems to let you download it as a Json file and it looks like you need to have a paid subsciption. There seems to be a download button at the bottom, and I am unable to uplaod the zip file to Pagebuilder but the icon is not there.

Fontello gives me an error message when I upload the SVG along with some complicated instructions

Is there an easier way of doing this, like just placing the image before the title?

David Rogers Asked this

Ok so I have tried to do this using Custom CSS with the following code

`.icon-heading {
position: relative;
padding-left: 30px; / Adjust padding to make space for the image /
}

.icon-heading::before {
content: url('your-image-url.png'); / actual image URL /
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%); / Vertically center the image /
width: 20px; / Adjust the image width /
height: 20px; / Adjust the image height /
}`

it now appers but it is too big and sits under the title rather than the left of it. Could you check the code please?

(See example)

https://imgur.com/a/ugpMaVD

David Rogers Asked this

I have now figured this out so this can be closed.

Rashida Rahman Staff

Hi,

Sorry for the unwanted delay.

Glad that you have figured this out already. You may accept the most useful answer in order to close the post:)

Have a nice day!

Log in to reply.