icon before like

maszd

cXF BRONZE
cXF Donor
Messages
112
Likes
43
#1
Hi @BassMan
i try to add an icon before like text with this code :
Code:
.LikeText:before {
    content: url("styles/nodes/like.png");
}
result :
Capture.PNG
how to make like text same line with icon?
thank you.
 

BassMan

Staff member
Administrator
Messages
691
Likes
341
Website
www.customizexf.com
#4
You can also do it with Font Awesome icon:
Code:
.LikeText:before {
    font-family: FontAwesome;
    content: "\f087";
    background-color: #176093;
    border-radius: 50%;
    padding: 4px;
    color: #fff;
}
 

maszd

cXF BRONZE
cXF Donor
Messages
112
Likes
43
#5
You can also do it with Font Awesome icon:
Code:
.LikeText:before {
    font-family: FontAwesome;
    content: "\f087";
    background-color: #176093;
    border-radius: 50%;
    padding: 4px;
    color: #fff;
}
:grinning: i will try, iam not yet installing your font awesome switch :blush:
its this site use font awesome locally or from cdn? i see xF 2.0 use font awesome, i think your add-on will be helpful cause make font awesome run locally.
 

maszd

cXF BRONZE
cXF Donor
Messages
112
Likes
43
#10
i use this but not luck:
Code:
.LikeText:before {
   content: url("styles/nodes/like.png");
   display: inline-block;
   vertical-align: middle;
   transform: scale(0.2, 0.2);
   -ms-transform: scale(0.2, 0.2);
   -webkit-transform: scale(0.2, 0.2);
}
Captures.PNG

edit.
nevermind, i was convert to svg format :)
 
Last edited:

maszd

cXF BRONZE
cXF Donor
Messages
112
Likes
43
#13
Hi @BassMan
sorry for asking here, before i add an icon before user mention with this code :
Code:
.message .messageText .username  {
  background: url("styles/nodes/tag.png") no-repeat left center transparent;
  height: 13px;
  width: 13px;
  margin-left: 3px;
  padding-left: 15px;
}
with this result :
Capture.PNG
and now i want used font awesome for replace that icon, i was try this code but not luck
Code:
.message .messageText .username  {
  font-family: FontAwesome;
  content: "\f007";
  font-size: 16px;
  margin-right: 2px;
}
please help, thanks.
 

You must log in or register to reply here.

Forgot your password?
Don't have an account? Register now

Welcome to customizeXF

We are running default XenForo style customized by cXF
Registration is free!

Similar threads

Top