如何在Bootstrap中覆盖左/右箭头图像（以及一般图像）？

Question

我使用标准的Bootstrap轮播，但我想用我自己的图像覆盖左/右箭头，以及底部的指示器：

我无法找到包含这些内容的任何地方，或者他们从中获取的来源。我在哪里/如何覆盖这些？提前谢谢！

Answer 1

您需要生成自己的图标字体。这里有一个详细的教程：http://www.sitepoint.com/build-svg-icons/

基本上，您需要将所有图像都设为svgs，然后使用https://icomoon.io/之类的服务生成字体。

获得字体后，使用@ font-face将其嵌入到项目中，然后需要覆盖代码，以便使用字体和字符。

例如，您需要将他添加到您的CSS：

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?n2igc9');
    src:url('fonts/icomoon.eot?#iefixn2igc9') format('embedded-opentype'),
        url('fonts/icomoon.woff?n2igc9') format('woff'),
        url('fonts/icomoon.ttf?n2igc9') format('truetype'),
        url('fonts/icomoon.svg?n2igc9#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

.carousel .glyphicon { font-family: 'icomoon'; }

最后一行代码将更改轮播中的所有图标以使用您在icomoon中生成的字体，

要更改单个图标（在本例中为右箭头图标）：

.carousel .glyphicon-chevron-right:before { content: "\e604"; } 

当您从icomoon下载时，它会附带一个演示，其中包含显示所有角色的代码。