Support Xenforo Prefix CSS Help

[Muckraker]

I am looking for help with CSS adding to Resource Prefixs.

My admin panel:

Prefix designs i have seen on other websites:

How can i add css designs like that?
I cannot find info on this anywhere.

 

[XenForo]

Your pictures are not visible
Please attach in this section(upload images)

 

[Muckraker]

Your pictures are not visible
Please attach in this section(upload images)

Sorry
My admin panel:

Prefix designs i have seen on other websites:

I found this thread here: XenForo Tips - Creating custom prefix styling
and the above thread is useful, it lets me know where to do the edits, but I cannot figure out how to add images to the Custom CSS Class Names like the pics i posted above from another website.

 

[XenForo]

extra.less

.xnforolprofix1:before {
    font-family: "Font Awesome 5 Pro";
    padding-left: 5px;
    padding-right: 5px;
    content: "\f110";
}
.xnforolprofix1 {
    background: #CC99FF;
    color: #FFFFFF;
}
.xnforolprofix1 {
    display: inline-block;
    padding: 3px .35em;
    border: 2px solid transparent;
    border-radius: 30px;
    font-size: 90%;
    line-height: 1.26;
    text-decoration: none;
}

You can use this

 

[Tgdd.khachh]

Hello, what should I do if I see the background in a .gif image? Thank you