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.
 

Attachments

    You don't have permission to view attachments. Attachments are hidden.

maszd

cXF Pack C
cXF Pack B
cXF Donor
May 20, 2015
119
46
awesome! working perfect thank you very much :cool:
xxxx.PNG
 

Attachments

    You don't have permission to view attachments. Attachments are hidden.

BassMan

Staff member
Administrator
May 18, 2015
1,195
772
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 :)
 

Attachments

    You don't have permission to view attachments. Attachments are hidden.
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.
 

Attachments

    You don't have permission to view attachments. Attachments are hidden.

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.

Welcome to customizeXF

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

Search forums

Sticky sidebar

You'd like to have sticky sidebar on your forum? Click below.

Top