web-dev-qa-db-ja.com

レスポンシブサイズのフォント素晴らしいアイコン

レスポンシブFontAwesomeウェブサイトでBootstrapアイコンを使用しており、画面の解像度に応じて異なるサイズでアイコンを表示したい。

理想的には、コンテナの幅の割合、つまり幅の50％を使用してフォントの素晴らしいアイコンを表示したいので、それらは拡大縮小します。私はおそらくsvgアイコンを使用してこれを行うことができることを知っていますが、私のサイトの他の場所で使用しているので、FontAwesomeを使用したかったです。

クラス（fa-lgまたはfa-2x）を使用してサイズを指定できることを理解しています。最適な解決策は、Bootstrapクラスを使用して、画面解像度に応じてさまざまなサイズを非表示および表示することでしょうか、それともパーセントを使用してアイコンを自動的にスケーリングできますか？

csstwitter-bootstrapiconsfont-awesome
16
user1052096

あなたはこの答えを見なければなりません：

コンテナの幅に基づいたフォントのスケーリング

Font-sizeで「vw」単位を使用します。そこに記載されているブラウザのサポート表も確認してください-かなり良いです。

乾杯！

13
Artur Czyżewski
/* Font ico (Font-Awesome) */
.elastic-fai-xl{
    font-size:80px;
}
.elastic-fai-lg{
    font-size:50px;
}
.elastic-fai-md{
    font-size:40px;
}
.elastic-fai-sm{
    font-size:30px;
}
.elastic-fai-xs{
    font-size:20px;
}
/* Extra small devices */
@media(max-width:544px){
    .elastic-fai-group > .elastic-fai, .elastic-fai-xs{
        font-size:20px;
    }
}
/* Small devices */
@media(min-width:544px){
    .elastic-fai-group > .elastic-fai, .elastic-fai-sm{
        font-size:30px;
    }
}
/* Medium devices */
@media(min-width:768px){
    .elastic-fai-group > .elastic-fai, .elastic-fai-md{
        font-size:40px;
    }
}
/* Large devices */
@media(min-width:992px){
    .elastic-fai-group > .elastic-fai, .elastic-fai-lg{
        font-size:50px;
    }
}
/* Exrta Large devices */
@media(min-width:1200px){
    .elastic-fai-group > .elastic-fai, .elastic-fai-xl{
        font-size:80px;
    }
}
3
GigolNet Guigolachvili

はい、最善の方法は、グリフィコンに好みのフォントサイズを与えるCSSを定義することです。

.glyphicon-small {
    font-size: 1.2em;
}

.glyphicon-medium {
    font-size: 2em;
}

.glyphicon-big {
    font-size: 4em;
}

ただし、画面サイズに合わせて調整する場合は、CSSクラスを1つだけ持ち、実行中に CSS @media rule で変更して、目的の結果を得ることができます。

@media screen and (max-width: 299px) {
    .glyphicon {
        font-size: 1.2em;
    }
}

@media screen and (min-width: 300px) and (max-width: 799px) {
    .glyphicon {
        font-size: 2em;
    }
}

@media screen and (min-width: 800px) {
    .glyphicon {
        font-size: 4em;
    }
}

これによりコードがクリーンになり、最小限のコーディング作業で本当に素晴らしい結果が得られます;）

1
Jordi Castilla