Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
lostyazilim
tr.link

CSS içinden fontawesome çağırma

 9 Mesajlar 2.542 Okunma
acebozum
tr.link

#1
msain1536 msain1536 grafikrin.com Kullanıcı
  • Üyelik 14.05.2014
  • Yaş/Cinsiyet 30 / E
  • Meslek Graphic Designer
  • Konum İstanbul Anadolu
  • Ad Soyad M** S**
  • Mesajlar 472
  • Beğeniler 143 / 174
  • Ticaret 4, (%100)
Merhabalar; e-ticaret sitemde iconları img yerine font olarak kullanmak istiyorum. Font awesome için CSS kodları ekledim fakat buraya nasıl çağıracağım bilmiyorum :confused:

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

 

grafikrin.com | Stunning Ideas | Ücretsiz Grafik Tasarım Elementleri
wmaraci
reklam

#2
65116 65116 WM Aracı Anonim Üyelik
  • Üyelik 20.06.2016
  • Yaş/Cinsiyet - /
  • Meslek
  • Konum
  • Ad Soyad ** **
  • Mesajlar 632
  • Beğeniler 0 / 196
  • Ticaret 9, (%89)
msain1536



Ana Sayfa




şeklinde yapmak sence daha basit değilmi zaten css içerisinden bu şekilde çağırıyorsun
 

 

#3
msain1536 msain1536 grafikrin.com Kullanıcı
  • Üyelik 14.05.2014
  • Yaş/Cinsiyet 30 / E
  • Meslek Graphic Designer
  • Konum İstanbul Anadolu
  • Ad Soyad M** S**
  • Mesajlar 472
  • Beğeniler 143 / 174
  • Ticaret 4, (%100)

Güven adlı üyeden alıntı

msain1536



Ana Sayfa




şeklinde yapmak sence daha basit değilmi zaten css içerisinden bu şekilde çağırıyorsun


HTML içerisinde fonksiyon bunun gibi olduğundan nasıl yapacağımı bilemedim;




{{ getShoppingCartHtml() }}

<script>
jQuery(document).ready(function(){additionalCartUpdate();});
function additionalCartUpdate()
{
jQuery('#iCartListItemContainer').html('');ideacart1.products.each(function(item){var cartProducts = item;var cartObject = cartProducts[1];var cartPicture = cartId;/* Object Items */var cartAmount = parseFloat(cartProducts.value.amount);var cartBrandId = cartObject["brandId"];var cartBt = cartObject["bt"];var cartCategoryId = cartObject["categoryId"];var cartCurr = cartObject["curr"];var cartExt = cartObject["ext"];var cartId = cartObject["pid"];var cartPrice = cartObject["price"];var cartProductName = cartObject["product"];var cartProductNameFull = cartObject["product"];var cartRebate = cartObject["rebate"];var cartRebateType = cartObject["rebateType"];var cartRootProduct = cartObject["rootProduct"];var cartStockTypeLabel = cartObject["stockTypeLabel"];var cartTax = cartObject["tax"];/* General Price Control */var cartUpdatePrice = parseFloat(cartPrice);/* Rebate Control */if (cartRebate != 0) {if (cartRebateType == 0) { cartUpdatePrice = cartRebate;} else {cartUpdatePrice = cartPrice * (100 - cartRebate) / 100}}/* Tax Control */cartUpdatePrice = cartUpdatePrice * (100 + cartTax) / 100;/* Item Total Amount */cartUpdatePrice = cartUpdatePrice * cartAmount;/* Add 3 Dots */var cartTruncate = true; // Urun adi kisaltma (true / false)
var ideaCloneScript = jQuery("head script:contains('ideacurr1')").html();
if(cartObject['curr'] == 'GR'){var grConvertPrice = cartUpdatePrice * ideaCloneScript.split('GR_')[1].replace('");','');cartUpdatePrice = grConvertPrice;cartCurr = 'TL';}
if(cartObject['curr'] == 'USD'){var grConvertPrice = cartUpdatePrice * ideaCloneScript.split('USD_')[1].split('-EUR')[0];cartUpdatePrice = grConvertPrice;cartCurr = 'TL';}
if(cartObject['curr'] == 'EUR'){var grConvertPrice = cartUpdatePrice * ideaCloneScript.split('EUR_')[1].split('-GBP')[0];cartUpdatePrice = grConvertPrice;cartCurr = 'TL';}
/* Urun adi kisaltilacaksa kac karakter olacak ?*/
var cartTruncateLimit = 48;
if(cartTruncate == true) {function add3Dots(string, limit) {var dots = "...";if(string.length > limit) {cartProductName = string.substring(0,limit) + dots;}}add3Dots(cartProductName,cartTruncateLimit);}if(cartRootProduct != 0){cartPicture = cartRootProduct;}else{cartPicture = cartId;}

var _cartItemTemplatePicture = '
';
var _cartItemTemplateRemoveLink = '';
var _cartItemTemplateTitle = ''+cartProductName+'';
var _cartItemTemplateUnit = ''+cartAmount+' Adet';
var _cartItemTemplatePriceInformation = ''+cartUpdatePrice.toFixed(2)+' '+cartCurr+'';

/* Creating a Cart Items */
jQuery('#iCartListItemContainer').append(' \
\
\
'+ _cartItemTemplateRemoveLink +' \
\
\
'+ _cartItemTemplateTitle +' \
\
\
\
Adet : '+_cartItemTemplateUnit +' \
\
\
Tutar : '+ _cartItemTemplatePriceInformation +' \
\
\
\
');

});
/* Empty Cart Control */
if(ideacart1.productCount == 0){jQuery('#iCartEmptyContainer').html('
Alışveriş sepetinizde ürün bulunmamaktadır.
');}else{jQuery('#iCartEmptyContainer').html('');}
/* Cart Total Amount */
jQuery('.iCartPriceTotalAmount').html('TOPLAM TUTAR :
'+totalAmount.toFixed(2)+' '+ideacurr1.DefaultCurr+'
');
jQuery('.iCartPriceTotal').html(''+totalAmount.toFixed(2)+' '+ideacurr1.DefaultCurr+'');
/* Image Control */
jQuery('.iCartListItem img').error(function(){jQuery(this).attr('src','/images/nopic_product.jpg');});
}
/* Cart Item Remove Function */ function IdeaCartNewDeleteProduct(itemId){ideacart1.CompleteRemoveFromCart(itemId);SaveCart(escape(ideacart1.products.inspect()),'type=r,method=post');ideacart1.ReloadCart();if(typeof additionalCartUpdate!="undefined"){additionalCartUpdate();}document.location.reload(true);}
</script>








SEPETİME GİT
ALIŞVERİŞİ TAMAMLA



 

 

grafikrin.com | Stunning Ideas | Ücretsiz Grafik Tasarım Elementleri

#4
cgrclk cgrclk Fortis Fortuna Adiuvat Kullanıcı
  • Üyelik 18.11.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Ç**
  • Mesajlar 3270
  • Beğeniler 1014 / 1983
  • Ticaret 53, (%100)
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/
msain1536

kişi bu mesajı beğendi.

wmaraci
wmaraci

#5
msain1536 msain1536 grafikrin.com Kullanıcı
  • Üyelik 14.05.2014
  • Yaş/Cinsiyet 30 / E
  • Meslek Graphic Designer
  • Konum İstanbul Anadolu
  • Ad Soyad M** S**
  • Mesajlar 472
  • Beğeniler 143 / 174
  • Ticaret 4, (%100)

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;
}
 

 

grafikrin.com | Stunning Ideas | Ücretsiz Grafik Tasarım Elementleri

#6
cgrclk cgrclk Fortis Fortuna Adiuvat Kullanıcı
  • Üyelik 18.11.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Ç**
  • Mesajlar 3270
  • Beğeniler 1014 / 1983
  • Ticaret 53, (%100)
.iCart > a:before bu şekilde eklemeyi dene o zaman, yani sonuçta tıklanabilen kısım a etiketi. Olmazsa tekrar bakalım.
 

 

#7
msain1536 msain1536 grafikrin.com Kullanıcı
  • Üyelik 14.05.2014
  • Yaş/Cinsiyet 30 / E
  • Meslek Graphic Designer
  • Konum İstanbul Anadolu
  • Ad Soyad M** S**
  • Mesajlar 472
  • Beğeniler 143 / 174
  • Ticaret 4, (%100)

cgrclk adlı üyeden alıntı

.iCart > a:before bu şekilde eklemeyi dene o zaman, yani sonuçta tıklanabilen kısım a etiketi. Olmazsa tekrar bakalım.


.iCart > a:before .iCartAmount {
.iCart:before .iCartAmount {

olarak denedim olmadı. counter ı pasife çekiyor :confused:
 

 

grafikrin.com | Stunning Ideas | Ücretsiz Grafik Tasarım Elementleri

#8
werfection werfection WM Aracı Kullanıcı
  • Üyelik 01.12.2014
  • Yaş/Cinsiyet 27 / E
  • Meslek Web Master
  • Konum Bursa
  • Ad Soyad A** A**
  • Mesajlar 374
  • Beğeniler 69 / 83
  • Ticaret 18, (%100)
.iCart > a class'ına z-index:99999 !important; şeklinde bir atama deneyebilirmisiniz.
 

 

#9
msain1536 msain1536 grafikrin.com Kullanıcı
  • Üyelik 14.05.2014
  • Yaş/Cinsiyet 30 / E
  • Meslek Graphic Designer
  • Konum İstanbul Anadolu
  • Ad Soyad M** S**
  • Mesajlar 472
  • Beğeniler 143 / 174
  • Ticaret 4, (%100)

werfection adlı üyeden alıntı

.iCart > a class'ına z-index:99999 !important; şeklinde bir atama deneyebilirmisiniz.


.iCart:before { olarak yaptık classı da, bunun içine ekledim olmadı, .iCart > a .iCartAmount { içinde de olmadı :confused:
 

 

grafikrin.com | Stunning Ideas | Ücretsiz Grafik Tasarım Elementleri
Üst kısımda ki boşluk
wp Eklentiye css custom code ekleme yardım
wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
 
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al