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


98

同じフォントサイズでも標準の幅がないことに気づきました。単語がギザギザに表示されないように、アイテムのリストの前でこれらをどのように使用できますか?

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

これはコードです:

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

回答:



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;
}

ありがとうございました。これは私のフォントawesome.cssで、また私は、ダウンロードしたファイル(ではありませんでしたfortawesome.github.io/Font-Awesome/assets/font-awesome.zip(彼らが参照している)、さらにはCDNバージョンでbootstrapcdn.com/ index.html?v = 05162013150137#tab_fontawesome)。しかし、うまくいきました。ありがとう。
Jim Hohl-CTO Vidaao 2013年


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.