icon before like

Currently reading:
icon before like

maszd

cXF Pack C
cXF Pack B
cXF Donor
May 20, 2015
119
46
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
May 18, 2015
1,144
710
www.customizexf.com
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 Pack C
cXF Pack B
cXF Donor
May 20, 2015
119
46
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 Pack C
cXF Pack B
cXF Donor
May 20, 2015
119
46
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 Pack C
cXF Pack B
cXF Donor
May 20, 2015
119
46
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.
 

Create an account or login to comment

You must be a member in order to leave a comment

Create account

Create an account on our community. It's easy!

Log in

Already have an account? Log in here.

Top