使用數字與字體真棒

Question

我想使用數字來列出進程中的步驟。我很好奇如何用FA做到這一點。

就像一個圓圈裏面有一個1等等。這可能嗎？將FA被添加號碼的圖標列表

感謝

Answer 1

不，我知道了！實際上，Font awesome是一種僅用於渲染圖標的字體。以下是可能的圖標列表Fontawesome-icons。

你可以用很多其他方法做到這一點，我會用這兩種方法之一來做，這取決於你的需求。例如...

一個簡單的圈內有一個數字，我會走的方式是用CSS，創建一個圓形並使用普通文本。谷歌有很多帖子/例子。這裏是一個：how to create circles with css

如果你想實現這個更多的圖形/圖標我建議看看Fontello，這將創建一個字體出自己的svg文件。所以你可以做自己的數字與圖像作爲背景，並將數字作爲圖標呈現，就像fontawesome一樣。

有一個好的！

潘喬

Answer 2

字體真棒實際上有built-in support堆疊常規文本（即數字，字母，..）上的圖標上方。

這是一個nice example of a calendar icon，其月份的實際日期爲純文本。正如該文章還解釋說，你可能需要投入一些額外的樣式來優化定位。

HTML：

<span class="fa-stack fa-3x"> 
    <i class="fa fa-calendar-o fa-stack-2x"></i> 
    <strong class="fa-stack-1x calendar-text">27</strong> 
</span> 

CSS：

.calendar-text { margin-top: .3em; } 

Answer 3

下面的代碼將給出一個圈與多家

<span class="fa-stack fa-3x"> 
    <i class="fa fa-circle-o fa-stack-2x"></i> 
    <strong class="fa-stack-1x">1</strong> 
</span> 

下面的代碼將給出一個實心圓與多家

<span class="fa-stack fa-3x"> 
    <i class="fa fa-circle fa-stack-2x"></i> 
    <strong class="fa-stack-1x text-primary">1</strong> 
</span> 

聽到text-primary（從引導）用於設置數量

Answer 4

的顏色要包含字母和數字將使樣式表對於FA方式太大，他們不支持（https://github.com/FortAwesome/Font-Awesome/issues/5019）。所以我做的是像這樣的：

.fa-alph { 
font-family: Arial, sans-serif; /* your font family here! */ 
font-weight: bold; 
color: #860000; 
font-style: normal; 
} 

然後

<button class="btn btn-default" type="button"><i class="fa-alph">2</i></button> 

這留下一個乾淨的字體，你仍然可以用愚蠢的我（em）保持的trakc「圖標」。此外，這使所有圖標類型的字符保持在相同的基本範圍內...（。fa ^）

我相信這個線程是圍繞它的圖標。所以你可以修改上面的這個CSS，使它成爲<span>而不是<button>，並在你的範圍內創建一個塊元素。

.f-circle { 
font-family: Arial; /* your font family here! */ 
font-weight: bold; 
display: block; 
border: 1px solid #860000; 
border-radius: 999px; 
padding: 6px 12px; 
} 

然後

<span class="f-circle"><i class="fa-alph">2</i></span>