web-dev-qa-db-ja.com

素晴らしいフォントで数字を使用する

プロセスのステップをリストするために数字を使用したい。 Font Awesomeでこれを行う方法に興味がありました。

1、2、3 ...の円を使用したいと思います。これは可能ですか？
Font Awesomeはアイコンのリストに数字を追加しますか？

ありがとう！

htmlcssfont-awesome
40
rschonhoff

Font awesomeには、アイコンの上に通常のテキスト（数字、文字、..）を重ねるための 組み込みサポート があります。

カレンダーアイコンの良い例 は実際の月の日をプレーンテキストで示しています。投稿でも説明しているように、最適な配置のために余分なスタイルを追加する必要があるかもしれません。

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; }
42
Lennart Stoop

次のコードは、数字の付いた円を提供します

<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クラス（ブートストラップから）は、数値の色を設定するために使用されます

32
Sagar Ranglani

文字と数字を含めると、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>

これにより、すっきりしたきれいなフォントが残り、愚かなi（em）を使用して「アイコン」の痕跡を保持できます。さらに、これにより、すべてのアイコンタイプの文字が同じ要素範囲内に保持されます...（.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>
2
tradesouthwest

代わりに次のようなことができます：

<i class="fa fa-star" aria-hidden="true"> 1</i>
<i class="fa fa-star" aria-hidden="true"> 2</i> 
<i class="fa fa-star" aria-hidden="true"> 3</i> 
...
1
Jerome Blacq

これは、WordPressウィジェット内でうまく機能することがわかりました（ヘッダーにCDN styesheetを追加した後）：

<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa-stack-1x fa-inverse">1</i>
</span>
0
TheHackRepairGuy

私が知っているわけではありません！実際、Font awesomeはアイコンのレンダリングにのみ使用されるフォントです。使用可能なアイコンのリストを次に示します Fontawesome-icons 。

あなたはあなたが探しているものに応じてこの2つの他の方法の1つを使用してそれを行うだろう他の多くの方法でこれを行うことができます。例えば...

内部に数字が入った単純な円。CSSを使用して、円を作成し、内部に通常のテキストを使用します。そのためにグーグルにはたくさんの投稿/例があります。 cssで円を作成する方法

これをもっとグラフィック/アイコンで実現したい場合は、 Fontello をご覧になることをお勧めします。これにより、独自のsvgファイルからフォントが作成されます。したがって、画像を背景として独自の数字を作成し、fontawesomeのように数字をアイコンとしてレンダリングできます。

良いものを持っている！

パンチョ

0
Pancho