# Create a hr with an icon inside

**URL:** <https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669>\
**Category:** Webdesign Help\
**Created:** [September 15, 2024, 10:23am UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669 "2024-09-15T10:23:49Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![parmaster](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/p/df788c/32.png) [@parmaster](https://forum.bootstrapstudio.io/u/parmaster)\
**Post date:** [September 15, 2024, 10:23am UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/1 "2024-09-15T10:23:49Z")

</div>

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.

 ![image](https://forum.bootstrapstudio.io/uploads/default/original/2X/6/6503dec677e7c5beb9a75f5f88a5f259dbd2438c.png)

How should I do it?

Thank you in advance!

Kind regards

Alex

---

<div class="post-metadata">

**Author:** ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)\
**Post date:** [September 15, 2024, 11:52am UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/2 "2024-09-15T11:52:02Z")

</div>

Use the following CSS:

```auto
.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

---

<div class="post-metadata">

**Author:** ![parmaster](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/p/df788c/32.png) [@parmaster](https://forum.bootstrapstudio.io/u/parmaster)\
**Post date:** [September 15, 2024, 12:58pm UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/3 "2024-09-15T12:58:45Z")

</div>

Wow! Thank you very much!

Works like a charm!

---

<div class="post-metadata">

**Author:** ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)\
**Post date:** [September 16, 2024, 11:48am UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/4 "2024-09-16T11:48:52Z")

</div>

A slight tweek to the original code:

In your .iconHR::after add

```auto
transform: translateX(-50%);

```

Or version two with variables to control icon size, line weight and color:

```auto
.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

---

<div class="post-metadata">

**Author:** ![parmaster](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/p/df788c/32.png) [@parmaster](https://forum.bootstrapstudio.io/u/parmaster)\
**Post date:** [September 16, 2024, 3:12pm UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/5 "2024-09-16T15:12:17Z")

</div>

That’s really nice! 👍 I like it!

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [September 16, 2024, 4:37pm UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/6 "2024-09-16T16:37:02Z")

</div>

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:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![parmaster](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/p/df788c/32.png) [@parmaster](https://forum.bootstrapstudio.io/u/parmaster)\
**Post date:** [September 16, 2024, 4:45pm UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/7 "2024-09-16T16:45:21Z")

</div>

Where can we change the HTML for this? I can’t find it.

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [September 16, 2024, 10:53pm UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/8 "2024-09-16T22:53:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![parmaster](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/p/df788c/32.png) [@parmaster](https://forum.bootstrapstudio.io/u/parmaster)\
**Post date:** [September 17, 2024, 5:39pm UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/9 "2024-09-17T17:39:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [September 17, 2024, 10:02pm UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/10 "2024-09-17T22:02:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [September 17, 2024, 10:50pm UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/11 "2024-09-17T22:50:36Z")

</div>

> **[snippet](https://hr-icon.bss.design/)**
>
> snippet of a hr with an icon between

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [September 17, 2024, 11:42pm UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/12 "2024-09-17T23:42:56Z")

</div>

Okay I got it. To change the actual icon used, you’d have to edit the class inside the `<svg>`

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [September 18, 2024, 12:00pm UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/13 "2024-09-18T12:00:04Z")

</div>

I thought you knew how to customize an icon by now 🙃

![icon-options](https://forum.bootstrapstudio.io/uploads/default/original/2X/a/aaa2132917f919e76b88f71bd6ffc6a3e77ea14e.png)  
customized from options panel

 ![customized-option-panel](https://forum.bootstrapstudio.io/uploads/default/original/2X/e/ed9616b8f5cd98049c2db435bc6d958100c692a5.png)

![icon-appearance](https://forum.bootstrapstudio.io/uploads/default/original/2X/6/690d2f268bb6766d583cfc409e92c4a43b864b41.png)  
customized from appearance panel

 ![cusomized-appearance-panel](https://forum.bootstrapstudio.io/uploads/default/original/2X/e/e78d3317cf67d9cfe5d6789b294ca64cde31aebd.png)

---

<div class="post-metadata">

**Author:** ![parmaster](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/p/df788c/32.png) [@parmaster](https://forum.bootstrapstudio.io/u/parmaster)\
**Post date:** [September 18, 2024, 2:46pm UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/14 "2024-09-18T14:46:19Z")

</div>

@kuligaposten

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?

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [September 18, 2024, 7:27pm UTC](https://forum.bootstrapstudio.io/t/create-a-hr-with-an-icon-inside/11669/15 "2024-09-18T19:27:45Z")

</div>

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. 🫤