html-字体复制同一图标的整个屏幕长度

我正在做一个网站，我想使用一个字体可怕的图标，通过整个屏幕使用它作为一个部分分隔符

我可以在页面的全宽范围内复制多个，但当屏幕分辨率改变时，它的响应速度会变慢。。。不确定是否可能，有什么想法吗？

您可以使用站点将图标转换为

png

，然后使用该img作为背景并设置

背景重复：重复-x

div{
背景：url（'http://i.imgur.com/qkXOkZZ.png');
背景尺寸：包含；
背景重复：重复-x；
高度：50px；
}

我可以在页面的全宽范围内复制多个，但当屏幕分辨率改变时，它的响应速度会变慢

如果你只需要一个元素，它不一定是全宽的，并且有溢出切断

事实上，我建议不要将图标的默认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" */
}

.fa-pied-piper.全宽{
显示：块；
宽度：100%；
空白：预处理；
溢出：隐藏；
}
.花型风笛。全宽：前{
内容：“\f2ae\f2ae\f2ae\f2ae\f2ae\f2ae\f2ae……”；
/*重复你认为必要的次数
填写“整页宽度”*/
}

---

---

这是一个针对单个特定图标的简单解决方案，假设您只需要一个（或者可能两个、三个…）-如果您希望它适用于“任意”图标，则可能需要不同的解决方案。如果可以提前选择需要的多个特定图标，您可能希望使用CSS预处理器（如LESS或SASS）通过循环或类似的方式，至少为图标的

内容

属性创建上述重复CSS。

您需要使用图像和

background-repeat-x:repeat

。您可以找到将图标转换为图像您希望在屏幕上使用多个“图像”还是仅使用一个？