XF 2.0 Using images as prefixes

[Dubbed Navigator]

Hello

I'm looking to convert over from IPB4, to XF2.

One of the things we did with IP 4 was to replace the prefixes with images, something that was very easy.

Ive seen a couple of threads that explain how to do this with a little coding on XF1.5, but i'm struggling to use the same method.

Extra.css is what I can't seem to find in the default template. What has this changed to please?

 

[M@rc]

It's EXTRA.less for XF 2.

 

[Dubbed Navigator]

Cheers, it doesnt quite turn out how expected, any idea how to get rid of the text that overlaps the image?

 

[Dubbed Navigator]

Cheers for your help with that, much appriciated

 

[Mr Lucky]

Cheers, it doesnt quite turn out how expected, any idea how to get rid of the text that overlaps the image?

View attachment 163315

Do you mean lose the text altogether or just get it to not overlap?

To keep the text but without overlap

.label.label--gray::before

{content: url('/image.png');

    margin-right:10px

}

To lose the text, I'm not sure.

A dirty workaround would be to enter a single character such as " | " and style it the same colour as the background.

 

[HannahP]

any idea how to get rid of the text that overlaps the image?

text-indent: -10000em;

It moves the text outside of the viewport.

It seems hacky because it is, but it's the most common way you'll see it done.