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
676
Likes
324
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.
 

Welcome to customizeXF

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

Similar threads

Top