icon before like

Currently reading:
icon before like

maszd

cXF Pack B
cXF Donor
Joined
May 20, 2015
Messages
113
Reaction score
43
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
Joined
May 18, 2015
Messages
1,076
Reaction score
667
Website
www.customizexf.com
Hi maszd,

try with this code:
Code:
.LikeText:before {
   content: url("styles/nodes/like.png");
   display: inline-block;
   vertical-align: middle;
}
 

BassMan

Staff member
Administrator
Joined
May 18, 2015
Messages
1,076
Reaction score
667
Website
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 B
cXF Donor
Joined
May 20, 2015
Messages
113
Reaction score
43
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 B
cXF Donor
Joined
May 20, 2015
Messages
113
Reaction score
43
ah i see you add icon too :) but too small :D
 

maszd

cXF Pack B
cXF Donor
Joined
May 20, 2015
Messages
113
Reaction score
43
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 B
cXF Donor
Joined
May 20, 2015
Messages
113
Reaction score
43
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.
 

BassMan

Staff member
Administrator
Joined
May 18, 2015
Messages
1,076
Reaction score
667
Website
www.customizexf.com
@maszd

use this code:
Code:
.message .messageText .username:before  {
  font-family: FontAwesome;
  content: "\f007";
  font-size: 16px;
  margin-right: 2px;
}
 

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