字體真棒快捷方式

我在我的web項目中使用Awesome Font。有什麼選擇如何使一堆圖標的捷徑？例如。我有circle-thin圖標。現在在頁面上，我想把三個圖標放在一起，所以結果是OOO，但我不想在代碼中放入3倍的<i class="fa fa-circle-thin"></i>。所以當我寫它時，我可以以某種方式創建CSS快捷方式，會出現3個圓圈？字體真棒快捷方式

例子：

.circle-three { 
<i class="fa fa-circle-thin"></i> 
<i class="fa fa-circle-thin"></i> 
<i class="fa fa-circle-thin"></i> 
}

然後頁面上我就只用.circle_three類，而不是鍵入代碼爲圓三次。

來源

2015-04-23 DNac

純粹與CSS和HTML不是沒有很多複製粘貼css代碼我猜。也許在[更少]（http://lesscss.org/）上獲得戰利品。然後，您將FontAwesome提供的較少文件，並且您應該可以像這樣。 '.circle-three：在{content：@ fa-var-circle-thin〜@ fa-var-circle-thin〜@ fa-var-circle-thin}之前' – Ch33f

你在開發你的網站的語言/框架是什麼？ –

如果檢查CSS file包含字體真棒，你會發現這條規則：

.fa-circle-thin:before { 
    content: "\f1db"; 
}

所以，你可以做一個類似的規則來實現你想要的：

.fa-circle-three:before { 
    content: "\f1db \f1db \f1db"; 
}

Check this pen for an working example.

來源

2015-04-23 13:59:00 Ravan

有可能通過兩種

添加一個新的類，並創建繼承一切，只有一個規則，通過創建一個全新的類，將替代原有的增加要更改，
一個完全。

由於在FontAwesome CSS爲fa-circle-thin的唯一屬性是前僞元素的content，因此沒有別的繼承，在這種情況下，這兩個解決方案（附類或新類）有相同的行爲/含義。

.fa-circle-thin.triple::before { 
 
    content: "\f1db\f1db\f1db"; 
 
}

<link rel="stylesheet" 
 
    href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
Standard : <i class="fa fa-circle-thin"></i> 
 
Triple : <i class="fa fa-circle-thin triple"></i>

來源

2015-04-23 13:56:04

字體真棒快捷方式

回答

相關問題