web-dev-qa-db-ja.com

bootstrap基本的なグリフコンがありますか

ブートストラップのグリフィコンの基本的なサークルはありますか???画像が含まれているサークルはたくさんありますが、基本的なサークルを使用したいだけです。ありがとう！

twitter-bootstrapglyphicons
10
Daniel Aldridge

他の人が言ったように、Bootstrapチームは、アイコンスポットを標準の文字で埋めないことを選択しました。ただし、独自のものを作成するのは非常に簡単です。

.glyphicon.glyphicon-one-fine-dot:before {
    content: "\25cf";
    font-size: 1.5em;
}

デモ1

非常に大きくする必要がある場合は、位置を少しいじる必要があるかもしれません。疑似要素の行の高さを減らすことはできないので、マージンを持ってそれを引き下げる必要があります。

.glyphicon.glyphicon-one-fine-dot {
    margin-bottom: -.8em;
    overflow: hidden;
}
.glyphicon.glyphicon-one-fine-dot:before {
    content:"\25cf";
    font-size: 3em;
}

デモ2

空のドットもあります： デモ3

そしてもちろん、あなたはそれらを着色することができます： Demo 4

それをすべてボタンに合わせるのはどうですか？ 心配ありません。 マイナスの上マージンも使用してください。

33
isherwood

いいえ、ありません。 Glyphicons Halflingsフォント にはそのようなアイコンはありません。

Font Awesomeにはこのようなアイコンがあります （名前はfa-circle-o）。

3
cvrebert

デフォルトではなく、商用バージョンのグリフィコンを購入する必要があります。ただし、より良い（そして無料！）ソリューションがあります。 Icomoon App にアクセスして、好みのライブラリを選択するだけで、ライブラリを混在させたり、完全なサークルを見つけることもできます。ただし、そうでない場合は、選択したライブラリにサークルをアップロードするか、既存のアイコンの1つを編集してください。

ちなみに、Icomoon Freeライブラリには完全なEMPTYサークルがあります。

これでアイコンができたので、エクスポートするだけで、Bootstrapと同じように、アイコンとCSSを使用できるようになります。

2
Devin