19

私は Twitter Bootstrap を<i class="icon-flag"></i>使用していますが、CSS スプライトのアイコンを使用する場合に使用するように指示されています。

.logo-iconアイコンの1つを取得して大きくする独自のcssクラスを追加するにはどうすればよいですか?

私のクラスは現在次のようになっています。

.logo-icon {
    background-image: url("../img/glyphicons-halflings-white.png");
    background-position: -312px -24px;
}
4

4 に答える 4

14

scale() を使用するとどうなりますか???

.logo-icon {
    transform:scale(2.0,2.0);
    -ms-transform:scale(2.0,2.0); /* IE 9 */
    -moz-transform:scale(2.0,2.0); /* Firefox */
    -webkit-transform:scale(2.0,2.0); /* Safari and Chrome */
    -o-transform:scale(2.0,2.0); /* Opera */
}

使いやすく、メンテナンスも簡単ではありませんか? background-size と position を再計算することなく、任意のサイズにスケーリングできます。

システムの一部でアイコンのサイズを縮小するためにこれを使用しています。減らすための解決策を探すのに約1時間費やし、scale()をほとんど忘れていました。だから、他の人を助けるために共有するだけです。=D

しかし、もちろん、アイコンを大きくすると、完璧に見栄えの良いアイコンにはなりません。

于 2013-02-05T17:56:50.177 に答える
13

FontAwesome (実際のフォント) を使用するほど見栄えは良くありませんが、background-sizeプロパティを使用してグリフィコンをスケーリングできます。これには、他のすべての値を同じ係数でスケーリングする必要もあります。つまり、これを一般的に行うだけではなく、一度に 1 つのアイコンに対して行う必要があります。

たとえば、旗のアイコンを 2 倍にすると、次のようになります。

.icon-flag.logo-icon {
  width: 28px;  // 14px * 2
  height: 28px; // 14px * 2
  background-size: 938px 318px;  // original dimensions * 2
  background-position: -624px -48px;  // original position * 2
}

任意のアイコンに対してこれを行いたい場合は、おそらくプログラムでこれを生成できる LESS を使用することをお勧めします。個人的には、FontAwesome に切り替えるのがより良い選択肢だと思います。

于 2012-11-24T19:16:43.913 に答える
0

私は単純にフォントサイズを変更することを好みます:

.large-icon {
  padding: 11px 15px;
  font-size: 40px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
于 2014-07-07T00:26:56.203 に答える