html - font awesome同じアイコンを画面の全長にコピー

Question

私はウェブサイトを作っています。フォントのすばらしいアイコンの1つを画面全体に渡ってセクションセパレータとして使用したいと考えています。

ページの全幅に合わせて複数をコピーすることもできますが、画面解像度が変更されたときにはそれほど反応しません。

Answer 1

あなたは、私はちょうどページの全幅のための複数のコピーができpngにアイコンを変換するthisサイトを使用して、背景としてそのIMGを使用してbackground-repeat: repeat-x

div { 
 
    background: url('http://i.imgur.com/qkXOkZZ.png'); 
 
    background-size: contain; 
 
    background-repeat: repeat-x; 
 
    height: 50px; 
 
}

<div></div>

Answer 2

を設定することができますしかし、画面の解像度が変わったときに非常に反応しないでしょう...

ただ1つの要素、全幅、オーバーフローがカットされていれば、必ずしもそうである必要はありません。

実際には、アイコンのデフォルトのHTMLスニペットをドキュメントに何度もコピーしないでください。単一のものを使用し、追加のクラスを介して「拡張」して、生成されたコンテンツの文字が複数回繰り返す：

<i class="fa fa-pied-piper fullwidth" aria-hidden="true"></i> 

.fa-pied-piper.fullwidth { 
    display: block; 
    width: 100%; 
    white-space: pre; 
    overflow: hidden; 
} 
.fa-pied-piper.fullwidth:before { 
    content: "\f2ae\f2ae\f2ae\f2ae\f2ae\f2ae\f2ae\f2ae..."; 
             /* repeat as many times as you consider necessary 
             to fill "a whole page's width" */ 
} 

https://jsfiddle.net/g8hefymq/1/

---

これは（...または多分2、3）一つだけを必要とすると仮定すると、単一の特定のアイコンのためのシンプルなソリューションである - しかし、あなたが希望の場合これを "ちょっと"のアイコンのために働かせたいfontawesomeオファー、別の解決策が必要かもしれません。複数の特定のアイコンが必要になる場合は、LESSやSASSのようなCSSプリプロセッサを使用して、少なくともループを介してアイコンのcontentプロパティの繰り返しCSSを作成することができますまたはそのようなものです。