Kendi css'de harika yazı tipi nasıl kullanılır?

Bootstrap ve Font Awesome kullanıyorum. Çalıştığım özel bir css sınıfında, görüntüleri kullanmak yerine Font Awesome ikonlarını dahil etmeye çalıştım. İşte Yazı Harika önce kodum.Kendi css'de harika yazı tipi nasıl kullanılır?

.data .close { 
    display: block; 
    float: right; 
    width: 30px; 
    height: 30px; 
    background: url(../img/close.png) top right no-repeat; 
    text-align: right; 
    outline: none; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 
    opacity: 0.7; 
} 

.next { 
    right: 0; 
    float: right; 
} 

.next:hover { 
    background: url(../img/next.png) right 48% no-repeat; 
}

Kodum, Font Awesome özelliğini kullanmaktadır; Simgeler gösterilmez. Ne yaptığım hakkında bir fikrin var mı?

.data .close { 
    display: block; 
    float: right; 
    width: 30px; 
    height: 30px; 
    font-family: FontAwesome 
    content: "\f00d"; 
    text-align: right; 
    outline: none; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 
    opacity: 0.7; 
} 


.next { 
    right: 0; 
    float: right; 
} 

.next:hover { 
    font-family: FontAwesome 
    content: "\f054"; 
}

üstbilgi

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>test</title> 
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.css"> 
</head> 

.... 

....

here is a fiddle of what i'm working on.

kaynak

2013-08-12 user2636556

'un yardımcı olduğunu umuyoruz 'FontAwesome' tanımladınız mı? HTML kafanızı da gösterebilir misiniz? – Raptor

@ShivanRaptor güncellendi soru – user2636556

. Diğer simgeler için aynı şeyi bu

.lb-prev:hover { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
    opacity: 1; 
    text-decoration: none; 
} 

.lb-prev:before { 
    font-family: FontAwesome; 
    content: "\f053"; 
    font-size: 30px; 
}

kodunuzu

http://astronautweb.co/snippet/font-awesome/ burada bu konuda değişiklik daha okuyun. simgelerin rengini ve yüksekliğini de ayarlamak isteyebilirsiniz. her neyse, fiddle bu,

kaynak

2013-08-12 16:28:18

Web yazı ruhu bu nedenle sen kendin barındırma <head></head> arasında CDN sürümünü kullanmalısınız, mümkün olduğunca önbelleği kullanmaktır: Eğer SONRA CSS yüklü emin olun

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

Ayrıca Yukarıdaki satır veya özel yazı tipi CSS çalışmaz.

Referans: Eğer :before veya :after pseudo kullanarak bunu yapabilirsiniz Font Awesome Get Started

kaynak

2013-08-12 03:29:40 Raptor

css ve font-awesome'i aynı css'ye yerleştirirsem ne olur? css dosyaları ve js dosyaları da sunucumda önbelleğe alınır – user2636556

tamam, ancak önbellek sadece aynı CSS kullanan kişilerle paylaşamaz. Bu arada, senin sorunun çözüldü mü? – Raptor

hayır, eşik çalışmıyor. Görüntüler gösterilmez. Ben temelde http://lokeshdhakar.com/projects/lightbox2/ – user2636556

Kendi css'de harika yazı tipi nasıl kullanılır?

cevap

İlgili konular