Hallo!
I want to add a hr with an icon between two sections/container/divs.
I did it with a table ( 1 row and three columns), but I think there is a better or a proper way.
Here’s what I mean.
How should I do it?
Thank you in advance!
Kind regards
Alex
Use the following CSS:
.iconHR {
position: relative;
border-top: 0px;
height: 20px;
opacity: 1;
}
.iconHR::before {
content: "";
top: 10px;
position: absolute;
background: grey;
height: 1px;
width: 100%;
display: block;
}
.iconHR::after {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="var(--bs-warning)" class="bi bi-hearts" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.931.481c1.627-1.671 5.692 1.254 0 5.015-5.692-3.76-1.626-6.686 0-5.015m6.84 1.794c1.084-1.114 3.795.836 0 3.343-3.795-2.507-1.084-4.457 0-3.343M7.84 7.642c2.71-2.786 9.486 2.09 0 8.358-9.487-6.268-2.71-11.144 0-8.358"/></svg>');
display: block;
background: white;
width: 30px;
}
Then add the class iconHR to any HR you want with the style
Wow! Thank you very much!
Works like a charm!
A slight tweek to the original code:
In your .iconHR::after add
transform: translateX(-50%);
Or version two with variables to control icon size, line weight and color:
.iconHR {
--iconSize: 20px;
--hrcolor: rgba(128, 128, 128, 0.5) ;
--hrbgcolor: transparent;
--hrgap: 15px;
--hrweight: 1px;
--gst: calc(50% - var(--hrgap));
--gen: calc(50% + var(--hrgap));
position: relative;
border-top: 0px;
height: var(--iconSize);
opacity: 1;
}
.iconHR::before {
content: "";
top: calc(var(--iconSize) / 2);
position: absolute;
background: grey;
background: linear-gradient(
90deg,
var(--hrcolor) 0%,
var(--hrcolor) var(--gst),
var(--hrbgcolor) var(--gst),
var(--hrbgcolor) var(--gen),
var(--hrcolor) var(--gen),
var(--hrcolor) 100%
);
height: var(--hrweight);
width: 100%;
display: block;
}
.iconHR::after {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="red" /* <- color of icon*/ class="bi bi-hearts" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.931.481c1.627-1.671 5.692 1.254 0 5.015-5.692-3.76-1.626-6.686 0-5.015m6.84 1.794c1.084-1.114 3.795.836 0 3.343-3.795-2.507-1.084-4.457 0-3.343M7.84 7.642c2.71-2.786 9.486 2.09 0 8.358-9.487-6.268-2.71-11.144 0-8.358"/></svg>');
display: block;
width: var(--iconSize);
height:var(--iconSize);
}
The icon color still needs to be set in the fill of the svg
That’s really nice! 
I like it!
To allow changing both the colors and icon from the options panel, you can replace the hr element styled with custom CSS with the following HTML markup:
<div class="d-flex justify-content-center align-items-center">
<div class="border-2 d-flex border-top w-100"></div>
<svg class="bi bi-hearts fs-1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.931.481c1.627-1.671 5.692 1.254 0 5.015-5.692-3.76-1.626-6.686 0-5.015Zm6.84 1.794c1.084-1.114 3.795.836 0 3.343-3.795-2.507-1.084-4.457 0-3.343ZM7.84 7.642c2.71-2.786 9.486 2.09 0 8.358-9.487-6.268-2.71-11.144 0-8.358Z"></path>
</svg>
<div class="border-2 d-flex border-top w-100"></div>
</div>
This allows both the colors and the icon to be customized directly from the options panel.
Where can we change the HTML for this? I can’t find it.
To do it with @kuligaposten’s method (if I’m understanding it correctly), just add a Custom Code component and copy his code above and then paste it into the Custom Code component (delete the default code that’s there.)
When done, select the Custom Code component, right click and choose Convert to Components from the menu.
Now your horizontal rule will be Div with a few child elements. You can select the parent Div and change the color of the Icon using Options > Text Options > Color, and you can select the two child (which are the horizontal rules) and change their color and width using Options > Decorations > Border Width and Border Color
Ah yes, I’ve got it.
That’s nice, but with this I can only use the pre-defined bootstrap colors. Or I use an unused pre defined color and change this.
I may not have understood @kuligaposten’s method correctly. I’m not sure how it allows you to change the icon following the instructions I gave you. I probably got something wrong.
Okay I got it. To change the actual icon used, you’d have to edit the class inside the <svg>
I thought you knew how to customize an icon by now 
customized from options panel
customized from appearance panel
If I use your html code and create a new custom code and convert it to a custom component I have no icon option like in your screenshot.
Am I missing something?
Embarrassingly, I don’t have these options as I’m stuck on BSS 6.4.5 until I switch to Windows 10 (which I’ve been trying to do for some time now, but it’s a massive PITA for reasons I won’t get into here.)
I may have to stop giving BSS advice on certain things until I can install the latest version of the software. 
