FontAwesome veya Glyphicons'u css ile kullan:

Question

'dan önce :before sözde öğesi kullanırken css content: öğesinin HTML'sini gömmenin bir yolu var mı?

Böyle bir kullanım durumunda bir Yazı Müthiş (veya Glyphicon) kullanmak istiyorum:

h1:before { 
     content: "X"; 
     padding-right: 10px; 
     padding-left: 10px; 
     color: @orangeLight; 
    } 

X<i class="icon-cut"></i> gibi bir şey olduğunda.

Elbette bunu el ile HTML'de yapabilirim, ancak bu durumda :before'u kullanmak istiyorum.

Benzer şekilde, <i>'u liste mermi olarak kullanmanın bir yolu var mı? Bu çalışır, ancak çok satırlı mermi öğeleri için doğru davranmaz: sizin tarif Ne

<ul class="icons"> 
    <li><i class="icon-ok"></i> Lists</li> 
    <li><i class="icon-ok"></i> Buttons</li> 
    <li><i class="icon-ok"></i> Button groups</li> 
    <li><i class="icon-ok"></i> Navigation</li> 
    <li><i class="icon-ok"></i> Prepended form inputs</li> 
</ul> 

Answer 1

aslında FontAwesome zaten ne yaptığını. FontAwesome font-ailesini, "icon-" ile başlayan bir sınıfa sahip herhangi bir öğenin ::before sözde öğesine uygularlar.

[class^="icon-"]:before, 
[class*=" icon-"]:before { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    display: inline-block; 
    text-decoration: inherit; 
} 

Sonra sınıfı ile eleman simgeyi yerleştirmek için sözde elemanı ::before kullanın. Sadece http://fortawesome.github.com/Font-Awesome/ gitti ve bu bulmak için kod teftiş: Tekrar simgesi eklemek isteyen varsa

.icon-cut:before { 
    content: "\f0c4"; 
} 

Yani, bunu başarmak için ::after eleman kullanabilirsiniz. Ya da sorunuzun ikinci kısmı için, mermi karakterini bir liste öğesi gibi görünmesi için ::after sözde öğesini kullanabilirsiniz. Ardından, sola veya benzer bir şeye yerleştirmek için mutlak konumlandırmayı kullanın. Listenizi öğeleri söz konusu

i:after{ content: '\2022';} 

Answer 2

istenen etkiyi elde etmek için kullanabileceğiniz küçük bir CSS yoktur.

ul.icons li { 
    position: relative; 
    padding-left: -20px; // for example 
} 
ul.icons li i { 
    position: absolute; 
    left: 0; 
} 

Ben OS X

Answer 3

<ul class="icons-ul"> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
</ul> 

Tüm yazı müthiş simgeler Safari'de bu test ettik Bootstrap ile varsayılan gelir. Müthiş son Yazı Tipi SASS ve AZ için .fa-icon() mixin dahil kurar - :before simgeyi kullanarak:

http://jsfiddle.net/ZEDHT/

<style> 
ul { 
    list-style-type: none; 
} 
</style> 

<ul class="icons"> 
<li><i class="fa fa-bomb"></i> Lists</li> 
<li><i class="fa fa-bomb"></i> Buttons</li> 
<li><i class="fa fa-bomb"></i> Button groups</li> 
<li><i class="fa fa-bomb"></i> Navigation</li> 
<li><i class="fa fa-bomb"></i> Prepended form inputs</li> 
</ul> 

Answer 4

Bu Yapmaya çalıştığınız ne yapmanın en kolay yoludur . Bu, font-family'un yanı sıra bazı oluşturma tweaks'lerini (ör. -webkit-font-smoothing) otomatik olarak içerecektir. Böylece, aşağıdaki gibi yapabilirsiniz: örn .:

Answer 5

Re:

Answer 6

Bu yaklaşımdan kaçınılmalıdır. vertical-align için varsayılan değer baseline'dur. Sadece sahte öğenin yazı tipi ailesini değiştirmek, farklı yazı tiplerine sahip öğelerle sonuçlanır. Farklı yazı tipleri farklı yazı tipi metriklerine ve farklı taban hatlarına sahip olabilir. Farklı taban hatlarının hizalanması için, elemanın toplam yüksekliğinin artması gerekecekti. See this effect in action.

Her yazı tipi simgesi için bir öğeye sahip olmak her zaman daha iyidir.

Answer 7

@keithwyland yanıtı harika. İşte SCSS mixin var:

@mixin font-awesome($content){ 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    display: inline-block; 
    text-decoration: inherit; 
    content: $content; 
} 

Kullanımı:

`yana

@include font-awesome("\f054");