アイテムは通常のサイズになる前にページの全幅になります

Question

ページには、ページの全幅であり、それから望むサイズになるアイテム（Aサークル）があります。これは本当に素早く起こり、厄介なことです。アイテムを正しくロードする方法はありますか？

https://jsfiddle.net/esr6vLbq/11/（jsfiddleの実行を押すと、あなたがブラウザ全体をリフレッシュする必要が起こることはありません）

これは、私が使用していますSCSSです：

@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); 

.fab { 
    border-radius: 100%; 
    padding: 10px; 
    display: inline-flex; 
    background-color: red; 
    color: white; 

    &.fab-lg > i { 
    font-size: 3rem; 
    } 
    &:hover { 
    color: #fff; 
    } 
} 

そして、これは、関連するhtmlです。

<a href="" class="fab fab-lg"><i class="material-icons">autorenew</i></a> 

ので、ここでのコードがある場合は多分これは、.material-icons CSSからです。

Answer 1

問題は、Googleからのフォント読み込みの遅延のためです。そのため、フォントファイルを読み込んだ後にアイコンに切り替える前に、autorenew（アイコンよりもはるかに広い）と言ってしまいます。

解決策は2つあります。あなたは、ボタンのために隠されたオーバーフローと一緒に最大幅と最大高さを設定することができます。

.fab { 
    max-width: 48px; 
    max-height: 48px; 
    overflow: hidden; 
} 

また、ループアイコンの他の実装を使用することもできます。

<i class="material-icons">&#xE028;</i> 

もちろん、逆の問題（最初は小さすぎます）が発生します。大きなものより目立ちにくいが、それでも見ることができる。 min-widthとmin-heightを使用する以外は同じことができます。