wpForo 1.x.x [Solved] icons not displaying correctly

try this code for the icons

#wpforo #wpforo-wrap i[class*="fas"]::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    top: 0 !important;
}
#wpforo #wpforo-wrap i[class*="far"]::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    top: 0 !important;
}
#wpforo #wpforo-wrap i[class*="fab"]::before {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 900 !important;
    top: 0 !important;
}
#wpforo #wpforo-wrap .fas, 
#wpforo #wpforo-wrap .far,
#wpforo #wpforo-wrap .fab {
    text-decoration: none !important;
}

2 Replies

rainerpuschner

(@rainerpuschner)

Joined: 4 years ago

Active Member

Posts: 13

Oct 28, 2021 2:53 pm

@tutrix THANK YOU!!! Your CSS Code just works perfectly!

rainerpuschner

(@rainerpuschner)

Joined: 4 years ago

Active Member

Posts: 13

Oct 28, 2021 2:55 pm

Screenshot-2021-10-28-165519.jpg

Oh no! There is still one missing!

Posts: 13

rainerpuschner

Topic starter

Oct 28, 2021 2:56 pm

(@rainerpuschner)

Active Member

Joined: 4 years ago

And this one (or is it the same?)

Screenshot-2021-10-28-165625.jpg

Posts: 13

rainerpuschner

Topic starter

Oct 28, 2021 2:59 pm

(@rainerpuschner)

Active Member

Joined: 4 years ago

And what to do here?

Screenshot-2021-10-28-165859.jpg

8 Replies

Tutrix

(@tutrix)

Joined: 6 years ago

Noble Member

Posts: 1521

Oct 28, 2021 3:01 pm

add this too

#wpforo #wpforo-wrap i[class*="fa-layer-group"]::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    top: 0 !important;
}

#wpforo #wpforo-wrap .wpforo-login-wrap .wpf-field .wpf-field-wrap input[type="text"], 
#wpforo #wpforo-wrap .wpforo-login-wrap .wpf-field .wpf-field-wrap input[type="password"], 
#wpforo #wpforo-wrap .wpforo-login-wrap .wpf-field .wpf-field-wrap input[type="email"] {
    padding: 10px 20px 10px 34px !important;
}

rainerpuschner

(@rainerpuschner)

Joined: 4 years ago

Active Member

Posts: 13

Oct 28, 2021 3:15 pm

Screenshot-2021-10-28-171418.jpg

@tutrix Yeah! Its getting better from time to time! THANK YOU SO MUCH!

This onei s still missing

Tutrix

(@tutrix)

Joined: 6 years ago

Noble Member

Posts: 1521

Oct 28, 2021 4:00 pm

you must use the complete code I posted above

rainerpuschner

(@rainerpuschner)

Joined: 4 years ago

Active Member

Posts: 13

Oct 28, 2021 5:07 pm

@tutrix i did!

This is the whole Code in the CSS section of wpforo:

#wpforo-wrap {
   font-size: 13px; width: 100%; padding:10px 0; margin:0px; border-radius: 5px;
}


#wpforo #wpforo-wrap i[class*="far"]::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    top: 0 !important;
}
#wpforo #wpforo-wrap i[class*="fab"]::before {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 900 !important;
    top: 0 !important;
}
#wpforo #wpforo-wrap .fas, 
#wpforo #wpforo-wrap .far,
#wpforo #wpforo-wrap .fab {
    text-decoration: none !important;
}

#wpforo #wpforo-wrap i[class*="fa-layer-group"]::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    top: 0 !important;
}

#wpforo #wpforo-wrap .wpforo-login-wrap .wpf-field .wpf-field-wrap input[type="text"], 
#wpforo #wpforo-wrap .wpforo-login-wrap .wpf-field .wpf-field-wrap input[type="password"], 
#wpforo #wpforo-wrap .wpforo-login-wrap .wpf-field .wpf-field-wrap input[type="email"] {
    padding: 10px 20px 10px 34px !important;
}

Tutrix

(@tutrix)

Joined: 6 years ago

Noble Member

Posts: 1521

Oct 28, 2021 5:10 pm

and why not completely?

rainerpuschner

(@rainerpuschner)

Joined: 4 years ago

Active Member

Posts: 13

Oct 28, 2021 5:18 pm

@tutrix Did i miss some snippet? Thats all code snippets you showed to me, isnt it?

Tutrix

(@tutrix)

Joined: 6 years ago

Noble Member

Posts: 1521

Oct 28, 2021 6:07 pm