bootstrap-dark icon indicating copy to clipboard operation
bootstrap-dark copied to clipboard

Dark Navbar's Icon malformed data

Open Virus5600 opened this issue 1 year ago • 3 comments

When using the .navbar-dark .navbar-toggler-icon, the icon is not showing. After looking through the styles, the main culprit is the malformed url() value for the said class.

My temporary fix was to use this:

.navbar-dark .navbar-toggler-icon,
.navbar-themed .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

The code was originally this:

.navbar-dark .navbar-toggler-icon,
.navbar-themed .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns=http://www.w3.org/2000/svg width=30 height=30 viewBox=0 0 30 30%3e%3cpath stroke=rgba%28255, 255, 255, 0.5%29 stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d=M4 7h22M4 15h22M4 23h22/%3e%3c/svg%3e");
}

And as you can see, the missing single quotes created a malformed URL due to the spaces in between some values such as the d attribute's value. Thus, when viewed in a new tab, this is the result: image

which then results to this: image

Compared to what it should be like this: image image

Virus5600 avatar Jul 19 '23 19:07 Virus5600