1

私が使用するときはすべてが完璧です：

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> text
</button>

自分のアイコンが欲しいです。それが私が使用する理由です：

<button type="submit" class="btn btn-primary">
  <i class="icon-school icon-white"></i> text
</button>

ボタンにアイコンが表示されますが、アイコンが少し高くなっています（20px x16px）。したがって、75％で表示されます。それを修正する方法は？高さやパディングを変更しても効果はありません。

ありがとうございました。

4

2 に答える 2

1

icon-persoクラスを作成する

<button type="submit" class="btn btn-primary">
  <i class="icon-school icon-perso"></i> text
</button>

次の css を追加して、デフォルトの動作をオーバーライドします。

  • あなたの写真のURL
  • 写真の幅と高さ
  • 行の高さを画像の高さに変更します
  • 必要に応じて余白

.

.icon-perso {
  background-image: url("../img/glyphicons-perso.png");
  width: 20px;
  height: 16px
  line-height: 16px;
}

画像に glyphicons-halflings.png のような複数のアイコンが含まれている場合は、背景の位置を変更する必要がある場合があります

.icon-school {
  background-position: 0px 0px;
}

bootstrap.css気になる方は2143行目あたりから見てみてください。

于 2012-09-10T16:06:45.807 に答える
1

The best way is to extend the bootstrap icon sprite and add one more row on the css with the exact position of your new icon.

Search for one of the bootstrap icons and add your below.

I do always in this way also if my icon is bigger, just change the width / height of your only.

于 2012-09-10T13:55:38.140 に答える