Aspect modern butoanelor din interiorul topicului folosind Font Awesome

1. Javascript:

• Titlu: Instalare Font awesome
  
• Amplasare: Toate paginile
  
• Cod:
  
  

  Cod:

  
(function() {
  var FA = 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css',
      a = document.createElement('LINK');
  a.rel = 'stylesheet';
  a.type = 'text/css';
  a.href = FA;
  document.getElementsByTagName('HEAD')[0].appendChild(a);
})();


  
  

• Titlu: Inlocuire imagini Citeaza/Editeaza/Sterge/Ip
  
• Amplasare: Topicuri
  
• Cod:
  

  Cod:

  
jQuery(function($)
{

$("img[src='http://2img.net/s/t/20/31/02/i_icon_quote.png']").replaceWith('<span class="butoanetopic butoanetopic-quote"><i class="fa fa-quote-right"></i> CITEAZA</span>');
});

jQuery(function($)
{

$("img[src='http://2img.net/s/t/20/31/02/i_icon_edit.png']").replaceWith('<span class="butoanetopic butoanetopic-editeaza"><i class="fa fa-pencil-square-o"></i> EDITEAZA</span>');
});

jQuery(function($)
{

$("img[src='http://2img.net/s/t/20/31/02/i_icon_delete.png']").replaceWith('<span class="butoanetopic butoanetopic-sterge"><i class="fa fa-scissors"></i> STERGE</span>');
});

jQuery(function($)
{

$("img[src='http://2img.net/s/t/20/31/02/i_icon_ip.png']").replaceWith('<span class="butoanetopic butoanetopic-ip"><i class="fa fa-search"></i> IP</span>');
});

jQuery(function($)
{

$("img[src='http://2img.net/s/t/20/31/02/i_icon_report.png']").replaceWith('<span class="butoanetopic butoanetopic-ip"><i class="fa fa-search"></i> RAPORTEAZA</span>');
});

  
  

https://2img.net/s/t/20/31/02/i_icon_quote.png - Inlocuiti cu imaginea actuala de la butonul quote. https://2img.net/s/t/20/31/02/i_icon_edit.png - Inlocuiti cu imaginea actuala de la butonul editeaza. https://2img.net/s/t/20/31/02/i_icon_delete.png - Inlocuiti cu imaginea actuala de la butonul sterge/delete. https://2img.net/s/t/20/31/02/i_icon_ip.png - Inlocuiti cu imaginea actuala de la butonul IP.

2. CSS:

Cod:

.butoanetopic {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.butoanetopic {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    margin-bottom: 0;
    padding: 3px 4px;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}
.butoanetopic-sterge {
    background-color: #B52A26;
    border-color: #902522;
    color: #fff;
}
.butoanetopic-sterge:hover {
        color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}

.butoanetopic-quote {
    background-color: #CA8226;
    border-color: #9E661F;
    color: #fff;
}
.butoanetopic-quote:hover {
    background-color: #E48710;
    border-color: #CE7F1A;
    color: #fff;
}
.butoanetopic-editeaza {
    background-color: #1381C3;
    border-color: #0A71AF;
    color: #fff;
}
.butoanetopic-editeaza:hover {
    background-color: #1092E0;
    border-color: #0A71AF;
    color: #fff;
}

.butoanetopic-ip:hover {
    color: #fff;
    background-color: #157254;
    border-color: #0f543e;
}
.butoanetopic-ip {
    color: #fff;
    background-color: #1d9d74;
    border-color: #198764;
}

3. Rezultat: