MyBB Community Forums
Prefixes style with icons - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: Prefixes style with icons (/thread-226718.html)

Prefixes style with icons - Mastersly - 2020-03-02

In this Thread i am gonna share my prefixes style i have on my forum

HTML
<span class="Tutorialprefix1"><i class="fa fa-gear" style="font-size:16px"></i>1.6</span>
<span class="MobilePhoneprefix1"><i style="font-size:16px" class="fa">&#xf10a;</i>Android</span>
<span class="Forumprefixe1"><i style="font-size:16px" class="fa">&#xf0e6;</i>Blog</span>
<span class="adminprefixeds1"><i style="font-size:16px" class="fa">&#xf005;</i>Information</span>
css
.Tutorialprefix1 {
background-color: #bd9c52!important;
    border-color: #a3833e!important;
    color: #fff!important;
    padding: 0 4px 0 2px;
}

.Forumprefixe1 {
background-color: #ff9800!important;
    border-color: #cc7a00!important;
    color: #fff!important;
    border-radius: 10%;
    padding: 0 1px 0 1px;
}

.MobilePhoneprefix1{
background-color: #03a9f4!important;
    border-color: #0287c3!important;
    color: #fff!important;
    border-radius: 10%;
    padding: 0px 1px 0 1px;
}

.adminprefixeds1{
background-color: #692525!important;
    border-color: #581222!important;
    color: #fff!important;
    border-radius: 10%;
    padding: 0px 1px 0 1px;
}
Of course you can use them

---Edit:
[Image: FS4bJql.png]
[Image: h5lBDzp.png]
[Image: Oe0qLmo.png]
[Image: c8k2gKb.png]
[Image: oUIdPxi.png]

RE: Prefixes style with icons - Omar G. - 2020-03-02

A preview would be nice.

RE: Prefixes style with icons - Mastersly - 2020-03-03

I will add it later

RE: Prefixes style with icons - Mastersly - 2020-03-05

added

RE: Prefixes style with icons - blongso - 2020-03-06

I like it thank you for sharing°