XF 2 Tip Custom Prefix Xenforo 2.1

[anonnsec]

Hey Guys Here I am with A Simple Tutorial To Make Preflix Background with Font awesome Icon

You Can Setup Any Background As well as gif also ?

i just found this by testing all css ?

Go to admin panel forum and create preflix
badge fa fa-graduation-cap
paste this code here same as image

You can Change fa-fa code according to your need

goto your Extra.less of your theme

.badge { background: url(https://i.imgur.com/AdlnXNi.gif); color: #fff; border: 1px solid red; fontawesome: abcd; } Paste this line in Your Extra.less

NOTE : YOU NEED SAME SIZE BACKGROUND

 

[DareSec]

Hey Guys Here I am with A Simple Tutorial To Make Preflix Background with Font awesome Icon

You Can Setup Any Background As well as gif also ?


View attachment 16384

i just found this by testing all css ?

Go to admin panel forum and create preflix
badge fa fa-graduation-cap
paste this code here same as image

View attachment 16385

You can Change fa-fa code according to your need

goto your Extra.less of your theme

badge { background: url(https://i.imgur.com/AdlnXNi.gif); color: #fff; border: 1px solid red; fontawesome: abcd; } Paste this line in Your Extra.less

View attachment 16386
NOTE : YOU NEED SAME SIZE BACKGROUND

anonnsecAdding more customisation ,many images at homepage . loading may slow which affects your rankings .

 

[anonnsec]

This is for who need that's it ?

 

[cmd]

As @DareDevil said, though—it will completely ruin your site loading times if it becomes used too many times, which in return will (without a doubt) obliterate your SEO results.

 

[Pr0fesseur]

Hey Guys Here I am with A Simple Tutorial To Make Preflix Background with Font awesome Icon

You Can Setup Any Background As well as gif also ?


View attachment 16384

i just found this by testing all css ?

Go to admin panel forum and create preflix
badge fa fa-graduation-cap
paste this code here same as image

View attachment 16385

You can Change fa-fa code according to your need

goto your Extra.less of your theme

.badge { background: url(https://i.imgur.com/AdlnXNi.gif); color: #fff; border: 1px solid red; fontawesome: abcd; } Paste this line in Your Extra.less

View attachment 16386
NOTE : YOU NEED SAME SIZE BACKGROUND

anonnsecWould be awesome if it were set up like mine here https://enxf.net/threads/thread-and-banner-prefix-styles.3628/
Maybe I could combine methods to something that wouldn't kill page load times, as using imgur slows your page way down.