html - font awesome copy the same icon full length of the screen

Question

I'm doing a website and I would like to use one of the font awesome icons to go across the whole screen to use it as a section separator.

I could just copy multiple for full width of the page, but it's not going to be very responsive when the screen resolution changes... not sure if it's even possible, any ideas?

Answer 1

You can use this site to convert icon to png and then use that img as background and set 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

I could just copy multiple for full width of the page, but it's not going to be very responsive when the screen resolution changes...

Well it doesn't have to be, if you just one element, full width and with the overflow cut off.

In fact, I would recommend to not copy the default HTML snippet for the icon multiple times into the document - but rather use a single one, and "extend" that via an additional class, so that the generated content character is repeated multiple times:

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

---

This is a simple solution for a single specific icon, assuming you need only one (or maybe two, three ...) - if however you would want this to work for "just any" icon fontawesome offers, a different solution might be needed. If multiple specific icons that are going to be needed could be picked in advance, you'd might want to use a CSS pre-processor like LESS or SASS to at least create the above, repetitive CSS for the icons' content properties via a loop or something like that.