web-dev-qa-db-ja.com

すべてのグリフの幅が同じであることを確認するにはどうすればよいですか？

同じフォントサイズであっても、標準の幅がないことに気付きました。単語がギザギザに見えないように、アイテムのリストの前でこれらを使用するにはどうすればよいですか？

問題のスクリーンショット：

これはコードです：

<ul id="myTab">
    <li class="active"><a href="#home"><i class="icon-tasks"></i> Proposal</a></li>
    <li><a href="#video"><i class="icon-film"></i> Videos</a></li>
    <li><a href="#asset"><i class="icon-paper-clip"></i> Assets</a></li>
    <li><a href="#payment"><i class="icon-credit-card"></i> Payment</a></li>
    <li><a href="#history"><i class="icon-calendar empty"></i> History</a></li>
</ul>
font-awesome
88
Jim Hohl - CTO Vidaao

3.1.1以降、CSSを編集する代わりにicon-fixed-widthクラスを使用できました。

http://fortawesome.github.io/Font-Awesome/3.2.1/examples/#navigation

4.0以降では、fa-fwを使用する必要があります。
4.x https://fontawesome.com/v4.7.0/examples/#fixed-width
5.x https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

指摘してくれてありがとう@kalessin。

185
leesei

これを行う別のスタイルが定義されていないことを確認しますか？

これは、私がFont Awesomeを使用しているサイトのファイルにHTMLを配置する方法です。

アイコンとテキストの並び方に注意してください。これは、線が追加された元の画像です。

Font Awesomeスタイルを削除するスタイルがどこかで定義されているようです。

また、元のFont Awesomeスタイル（font-awesome.css）それが一時的に解決するかどうかを確認します：

li [class^="icon-"], .nav li [class^="icon-"], 
li [class*=" icon-"], .nav li [class*=" icon-"] {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}
5
adrianbanks

このcssを使用してグリフまたは任意のアイコンを簡単にスケーリングできます

> .fa { transform: scale(1.5,1); }
1
Hasnain Mehmood

上記のFontawesomeバージョン4.Xでは、fa-fwのクラス<i> 鬼ごっこ。 Ref：- https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

0
Anant Singh