100

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

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

これはコードです： 

<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>
4

4 に答える 4

210

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

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/固定幅アイコン

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

于 2013-06-02T18:04:05.873 に答える
7

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

これは、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;
}
于 2013-05-17T08:57:31.210 に答える
3

4.X より上のFontawesomeバージョンでは、タグfa-fwで class を使用します。<i>参照: - https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

于 2019-01-17T06:12:15.060 に答える
2

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

> .fa { transform: scale(1.5,1); }
于 2017-12-21T09:58:45.597 に答える