html - font awesome kopieren das gleiche Symbol in voller Länge des Bildschirms

Question

Ich mache eine Website, und ich möchte eine der font awesome Symbole verwenden, um über den gesamten Bildschirm zu gehen, um es als Abschnitt Trennzeichen zu verwenden.

Ich könnte einfach mehrere für die gesamte Breite der Seite kopieren, aber es wird nicht sehr reaktionsschnell sein, wenn sich die Bildschirmauflösung ändert ... nicht sicher, ob es überhaupt möglich ist, irgendwelche Ideen?

Answer 1

Sie this Website verwenden können, Symbol png zu konvertieren und dann diese img als Hintergrund verwenden und 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

Ich konnte einfach mehrere für die volle Breite der Seite kopieren , aber es wird nicht sehr reaktionsschnell sein, wenn sich die Bildschirmauflösung ändert ...

Nun, es muss nicht sein, wenn Sie nur ein Element, volle Breite und mit dem Überlauf abgeschnitten haben.

In der Tat würde ich empfehlen, nicht das Standard-HTML-Snippet für das Symbol mehrmals in das Dokument zu kopieren - sondern eine einzige zu verwenden, und "erweitern", dass über eine zusätzliche Klasse, so dass das generierte Inhaltszeichen ist mehrfach wiederholt:

<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/

---

Dies ist eine einfache Lösung für ein einzelnes bestimmtes Symbol, Sie müssen unter der Annahme, nur eine (oder vielleicht zwei, drei ...) - wenn aber würden Sie möchte, dass dies für "Any Any" -Icon funktioniert fontawesome Angebote, könnte eine andere Lösung benötigt werden. Wenn mehrere spezifische Symbole, die benötigt werden, im Voraus ausgewählt werden können, sollten Sie einen CSS-Preprozessor wie LESS oder SASS verwenden, um mindestens das obige repetitive CSS für die Eigenschaften der Symbole content über eine Schleife zu erstellen oder etwas ähnliches.