cgrclk adlı üyeden alıntı

NpMMrd

Öncelikle fa class'ından gelen css kodlarını eklemelisin dive, sonra da ikon için gerekli olan unicode değerini content olarak eklemelisin. Tabi ki bunları :before pseudo su ile eklemen gerekiyor. Aşağıdan da ikonlara tıklayarak unicode değerlerine ulaşabilirsin.

http://fontawesome.io/icons/


Öncelikle çok teşekkür ederim, eklemeyi başardım. Fakat aşağıda ki resimde sepete tıklanmıyor da sayaca tıklanıyor.



eski hali;
.iCart {
float: right;
margin-top: 25px;
position: relative;
}

.iCart > a {
width: 25px;
height: 25px;
display: block;
background: url({{ themeAsset('images/icart.png') }}) no-repeat center center;
position: relative;
}

.iCart > a .iCartAmount {
position: absolute;
top: -7px;
right: -10px;
background: #ed1c24;
color: #ffffff;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}

.iCartContent {
position: absolute;
top: 55px;
right: 0;
width: 370px;
padding: 15px 20px;
background: #ffffff;
border: solid 1px #e1e1e1;
}


yeni hali;
.iCart {
float: right;
margin-top: 28px;
position: relative;
}

.iCart:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: 20px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f291"; /*bu unicode ikonu belirliyor.*/
}

.iCart > a .iCartAmount {
position: absolute;
top: -7px;
right: -10px;
background: #ed1c24;
color: #ffffff;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}

.iCartContent {
position: absolute;
top: 55px;
right: 0;
width: 370px;
padding: 15px 20px;
background: #ffffff;
border: solid 1px #e1e1e1;
}