ホームページ > ウェブフロントエンド > フロントエンドQ&A > ブートストラップにアイコンはありますか?

ブートストラップにアイコンはありますか?

WBOY
リリース: 2022-08-22 17:01:59
オリジナル
2514 人が閲覧しました

bootstrap中有icon图标;icon图标是在web项目中使用的图标字体,bootstrap中捆绑了200多种字体格式的icon图标,并且可以通过基于项目的bootstrap来免费使用,其实现原理就是通过“@font-face属性加载了字体。

ブートストラップにアイコンはありますか?

本教程操作环境:Windows10系统、bootstrap5版、DELL G3电脑

bootstrap中有icon图标

字体图标是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。

Bootstrap 捆绑了 200 多种字体格式的字形

小图标icon是一个优秀Web中不可缺少的一部分,起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。

Bootstrap框架中的图标都是字体图标,其实现原理就是通过@font-face属性加载了字体

@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
ログイン後にコピー

  自定义完字体之后,需要对icon设置一个默认样式,在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现,然后通过伪元素“:before”的“content”属性调取对应的icon编码

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
    content: "\2a";
}
ログイン後にコピー

Bootstrap部分图标如图所示:

ブートストラップにアイコンはありますか?

相关推荐:bootstrap教程

以上がブートストラップにアイコンはありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート