0

アイコンをテキストの横に垂直方向に中央揃えにしたいのですが、奇妙なサイズの違いがあり、それが難しくなっています。

アイコン フォントがこれらの奇妙なサイズの違いでレンダリングされるのはなぜですか?

Bootstrap で使用されているアイコン フォント メソッドを使用しています (疑似要素 :before を使用してコンテンツを配置します)。

これが<i class='icon'></i>サイズです。

ここに画像の説明を入力

これは<i class='icon'></i>:before サイズです。なぜ違うのですか？

ここに画像の説明を入力

HTML:

<h2>
  <i class="ss-picture"></i>
  Creatives
</h2>

CSS:

[class^="ss-"], [class*=" ss-"] {
  vertical-align: text-top;
  padding-right: 5px;
}

.ss-picture:before, .ss-picture.right:after {
  content: '';
}

[class^="ss-"], [class*=" ss-"] {
  font-family: "SSStandard";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
4

1 に答える 1

0

行の高さとフォントサイズを確認してください。

私は薄い両方のページのプロパティが異なります。

于 2014-12-18T08:59:05.020 に答える