Change path fill for SVG when hovering over a <li> - html

I will probably feel very dumb as soon as someone answers me, but I have been struggling all day with this and I obviously need help.
Working on a simple sharing toolbar for WordPress, and wanted to use SVG instead of icon fonts, so I started to look more into inline-SVG. But now I have a problem, as I have no idea how to change the fill color when hovering over the parent element.
I have the following CSS & HTML:
/* Sharing Bar ------------------- */
.entry-sharing ul {
margin-left: 0;
}
.entry-sharing li {
display: inline;
}
.entry-sharing li a {
background-color: #fafafa;
color: #919BA2;
padding: 0 10px 5px;
border-radius: 3px;
border: 1px solid #f2f2f2;
}
.entry-sharing .svg-icon-whatsapp:hover {
border-color: #128c7e;
color: #128c7e;
}
.entry-sharing .svg-icon-facebook:hover {
border-color: #3b5998;
color: #3b5998;
}
.entry-sharing .svg-icon-pinterest:hover {
border-color: #bd081c;
color: #bd081c;
}
.entry-sharing .svg-icon-twitter:hover {
border-color: #1da1f2;
color: #1da1f2;
}
.entry-sharing-svg-icon path {
fill: #919BA2;
}
.entry-sharing-svg-icon,
.entry-sharing-label {
display: inline-block;
vertical-align: middle;
}
.entry-sharing-svg-icon {
width: 15px;
height: 15px;
margin: 0 .2em .7em 0;
}
.entry-sharing-label {
font-size: 14px;
font-weight: 500;
}
<div class="entry-sharing">
<ul>
<li><a class="svg-icon-whatsapp" href="#"><span class="entry-sharing-svg-icon"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" class="svg-icon"><path class="svg-icon-path" d="M11.665 9.588c-.2-.1-1.177-.578-1.36-.644-.182-.067-.315-.1-.448.1-.132.197-.514.643-.63.775-.116.13-.232.14-.43.05-.2-.1-.842-.31-1.602-.99-.592-.53-.99-1.18-1.107-1.38-.116-.2-.013-.31.087-.41.09-.09.2-.23.3-.35.098-.12.13-.2.198-.33.066-.14.033-.25-.017-.35-.05-.1-.448-1.08-.614-1.47-.16-.39-.325-.34-.448-.34-.115-.01-.248-.01-.38-.01-.134 0-.35.05-.532.24-.182.2-.696.68-.696 1.65s.713 1.91.812 2.05c.1.13 1.404 2.13 3.4 2.99.476.2.846.32 1.136.42.476.15.91.13 1.253.08.383-.06 1.178-.48 1.344-.95.17-.47.17-.86.12-.95-.05-.09-.18-.14-.38-.23M8.04 14.5h-.01c-1.18 0-2.35-.32-3.37-.92l-.24-.143-2.5.65.67-2.43-.16-.25c-.66-1.05-1.01-2.26-1.01-3.506 0-3.63 2.97-6.59 6.628-6.59 1.77 0 3.43.69 4.68 1.94 1.25 1.24 1.94 2.9 1.94 4.66-.003 3.63-2.973 6.59-6.623 6.59M13.68 2.3C12.16.83 10.16 0 8.03 0 3.642 0 .07 3.556.067 7.928c0 1.397.366 2.76 1.063 3.964L0 16l4.223-1.102c1.164.63 2.474.964 3.807.965h.004c4.39 0 7.964-3.557 7.966-7.93 0-2.117-.827-4.11-2.33-5.608" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">WhatsApp</span></a></li>
<li><span class="entry-sharing-svg-icon"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" class="svg-icon"><path class="svg-icon-path" d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.48-1.195 1.18v1.54h2.39l-.31 2.42h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">Facebook</span></li>
<li><span class="entry-sharing-svg-icon"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" class="svg-icon"><path class="svg-icon-path" d="M8 0C3.582 0 0 3.582 0 8c0 3.39 2.108 6.285 5.084 7.45-.07-.633-.133-1.604.028-2.295.146-.625.938-3.977.938-3.977s-.24-.48-.24-1.188c0-1.11.646-1.943 1.448-1.943.683 0 1.012.513 1.012 1.127 0 .687-.436 1.713-.662 2.664-.19.797.4 1.445 1.185 1.445 1.42 0 2.514-1.498 2.514-3.662 0-1.91-1.376-3.25-3.342-3.25-2.276 0-3.61 1.71-3.61 3.47 0 .69.263 1.43.593 1.83.066.08.075.15.057.23-.06.25-.196.8-.223.91-.035.15-.115.18-.268.11C3.516 10.46 2.89 9 2.89 7.82c0-2.52 1.834-4.84 5.287-4.84 2.774 0 4.932 1.98 4.932 4.62 0 2.76-1.74 4.98-4.16 4.98-.81 0-1.57-.42-1.84-.92l-.5 1.9c-.18.698-.67 1.57-1 2.1.75.23 1.54.357 2.37.357 4.41 0 8-3.58 8-8s-3.59-8-8-8z" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">Pinterest</span></li>
<li><span class="entry-sharing-svg-icon"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" class="svg-icon"><path class="svg-icon-path" d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">Twitter</span></li>
</ul>
</div>
If you hover over one of the buttons, the border and text will change color, but the color of the SVG won't change. Playing around I was able to change the color if I hover over the SVG, but then the border and text do not change...
Is there a way for them all to change together without using javascript or anything like that?


Posting the answer for future reference:
To change the fill color of an SVG element, use the CSS fill property.
/* Sharing Bar ------------------- */
.entry-sharing ul {
margin-left: 0;
}
.entry-sharing li {
display: inline;
}
.entry-sharing li a {
background-color: #fafafa;
color: #919BA2;
padding: 0 10px 5px;
border-radius: 3px;
border: 1px solid #f2f2f2;
padding: 8px;
}
.entry-sharing .svg-icon-whatsapp:hover {
border-color: #128c7e;
color: #128c7e;
}
.entry-sharing .svg-icon-facebook:hover {
border-color: #3b5998;
color: #3b5998;
}
.entry-sharing .svg-icon-pinterest:hover {
border-color: #bd081c;
color: #bd081c;
}
.entry-sharing .svg-icon-twitter:hover {
border-color: #1da1f2;
color: #1da1f2;
}
.entry-sharing-svg-icon path {
fill: #919BA2;
}
.entry-sharing-svg-icon,
.entry-sharing-label {
display: inline-block;
vertical-align: middle;
}
.entry-sharing-svg-icon {
width: 15px;
height: 15px;
margin: 0 .2em .7em 0;
}
.entry-sharing-label {
font-size: 14px;
font-weight: 500;
}
/* Changing SVG fill color on hover */
li:hover a.svg-icon-whatsapp path {fill: #128c7e;}
li:hover a.svg-icon-facebook path { fill: #3b5998;}
li:hover a.svg-icon-pinterest path { fill: #bd081c;}
li:hover a.svg-icon-twitter path { fill: #1da1f2;}
<div class="entry-sharing">
<ul>
<li><a class="svg-icon-whatsapp" href="#"><span class="entry-sharing-svg-icon"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" class="svg-icon"><path class="svg-icon-path" d="M11.665 9.588c-.2-.1-1.177-.578-1.36-.644-.182-.067-.315-.1-.448.1-.132.197-.514.643-.63.775-.116.13-.232.14-.43.05-.2-.1-.842-.31-1.602-.99-.592-.53-.99-1.18-1.107-1.38-.116-.2-.013-.31.087-.41.09-.09.2-.23.3-.35.098-.12.13-.2.198-.33.066-.14.033-.25-.017-.35-.05-.1-.448-1.08-.614-1.47-.16-.39-.325-.34-.448-.34-.115-.01-.248-.01-.38-.01-.134 0-.35.05-.532.24-.182.2-.696.68-.696 1.65s.713 1.91.812 2.05c.1.13 1.404 2.13 3.4 2.99.476.2.846.32 1.136.42.476.15.91.13 1.253.08.383-.06 1.178-.48 1.344-.95.17-.47.17-.86.12-.95-.05-.09-.18-.14-.38-.23M8.04 14.5h-.01c-1.18 0-2.35-.32-3.37-.92l-.24-.143-2.5.65.67-2.43-.16-.25c-.66-1.05-1.01-2.26-1.01-3.506 0-3.63 2.97-6.59 6.628-6.59 1.77 0 3.43.69 4.68 1.94 1.25 1.24 1.94 2.9 1.94 4.66-.003 3.63-2.973 6.59-6.623 6.59M13.68 2.3C12.16.83 10.16 0 8.03 0 3.642 0 .07 3.556.067 7.928c0 1.397.366 2.76 1.063 3.964L0 16l4.223-1.102c1.164.63 2.474.964 3.807.965h.004c4.39 0 7.964-3.557 7.966-7.93 0-2.117-.827-4.11-2.33-5.608" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">WhatsApp</span></a></li>
<li><span class="entry-sharing-svg-icon"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" class="svg-icon"><path class="svg-icon-path" d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.48-1.195 1.18v1.54h2.39l-.31 2.42h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">Facebook</span></li>
<li><span class="entry-sharing-svg-icon"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" class="svg-icon"><path class="svg-icon-path" d="M8 0C3.582 0 0 3.582 0 8c0 3.39 2.108 6.285 5.084 7.45-.07-.633-.133-1.604.028-2.295.146-.625.938-3.977.938-3.977s-.24-.48-.24-1.188c0-1.11.646-1.943 1.448-1.943.683 0 1.012.513 1.012 1.127 0 .687-.436 1.713-.662 2.664-.19.797.4 1.445 1.185 1.445 1.42 0 2.514-1.498 2.514-3.662 0-1.91-1.376-3.25-3.342-3.25-2.276 0-3.61 1.71-3.61 3.47 0 .69.263 1.43.593 1.83.066.08.075.15.057.23-.06.25-.196.8-.223.91-.035.15-.115.18-.268.11C3.516 10.46 2.89 9 2.89 7.82c0-2.52 1.834-4.84 5.287-4.84 2.774 0 4.932 1.98 4.932 4.62 0 2.76-1.74 4.98-4.16 4.98-.81 0-1.57-.42-1.84-.92l-.5 1.9c-.18.698-.67 1.57-1 2.1.75.23 1.54.357 2.37.357 4.41 0 8-3.58 8-8s-3.59-8-8-8z" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">Pinterest</span></li>
<li><span class="entry-sharing-svg-icon"><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" class="svg-icon"><path class="svg-icon-path" d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill-rule="nonzero"/></svg></span> <span class="entry-sharing-label">Twitter</span></li>
</ul>
</div>

Related

How to get the open/closed status of an ngb-accordion

I want to render two different icons/divs in the title of ngb-panels of an accordion depending on whether the panel is expanded or collapsed. The panels have some form content inside them.So when the panel is closed it displays one icon and when it is opened it must display the other icon.
HTML and CSS template example
input[type="text"],
select.form-control{
background: transparent;
border: none;
border-bottom: 1px solid #000000;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
}
input[type="number"],
select.form-control{
background: transparent;
border: none;
border-bottom: 1px solid #000000;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
}
input[type="text"]:focus,
select.form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color:rgb(31, 14, 187);
}
input[type="number"]:focus,
select.form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color:darkred;
}
::ng-deep .collapse {
transition: max-height .55s, opacity .35s ease-in-out;
max-height: 0;
opacity: 0;
display: block !important;
&.show {
max-height: 100rem;
opacity: 1;
}
}
::ng-deep .accordion {
.card {
margin-bottom: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, .04) !important;
.card-header {
// padding-top: 0;
color: #000000;
padding: 0;
button {
padding: 1.2rem;
width: 100%;
span {
color: #5f5f5f;
float: left;
font-size: 1.2rem;
}
}
}
.card-body {
padding: 1rem;
}
}
}
<head><!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<ngb-accordion #acc="ngbAccordion" [destroyOnHide]='false' [closeOthers]="true" activeIds="ngb-panel-0">
<ngb-panel id="panel1">
<ng-template ngbPanelTitle>
<span *ngIf=""> <!-- condition when it is closed -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-x-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
style="color: red;border-color: red;"
/></svg
> </span>
<span *ngIf="" ><!-- condition when it is opened -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-check-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"
style="color: green;"
/></svg
> </span>
<span>Primary Details </span>
<span style="margin-left: 85%;"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" style="color: black;background-color: black;"/>
</svg></span>
</ng-template>
<ng-template ngbPanelContent>
some content
</ng-template>
</ngb-panel>
<ngb-panel id="panel2">
<ng-template ngbPanelTitle>
<span *ngIf=" "> <!--condition when it is closed -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-x-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
style="color: red;border-color: red;"
/></svg
> </span>
<span *ngIf=""> <!-- condition when it is opened -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-check-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"
style="color: green;"
/></svg
> </span>
<span>Secondary Details </span>
<span style="margin-left: 83.3%;"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" style="color: black;background-color: black;"/>
</svg></span>
</ng-template>
<ng-template ngbPanelContent>
<form #form2="ngForm" style="padding-left:20px;">
some more content
</form>
</ng-template>
</ngb-panel>
</ngb-accordion>
</body>
So, at *ngIf="" the status of whether the panel is closed or opened is checked and corresponding span is rendered. Please help me with the best way to check this status of panel.I have observed there are a couple of questions over this but they are not working.

You have a reference to an accordion in the acc variable thanks to this peace of code: #acc="ngbAccordion". To check if a panel expanded, you can use isExpanded method.
<ngb-accordion #acc="ngbAccordion" [destroyOnHide]='false' [closeOthers]="true" activeIds="ngb-panel-0">
<ngb-panel id="panel1">
<div>isActive: {{acc.isExpanded('panel1')}}</div>
</ngb-panel>
<ngb-panel id="panel2">
<div>isActive: {{acc.isExpanded('panel2')}}</div>
</ngb-panel>
</ngb-accordion>

How can I add a colored shadow at the right inside of my hexagon?

Thankfully I've found a hexagon on SO but now I've a problem. The hexagon can be filled with any color - currently orange but I need to fill it with a color and a shadow:
<svg viewBox="0 0 180 100" style="width:180px;height:130px">
<defs>
<clipPath id="hexagon_clip">
<path id="hexagon" d="M38,2
L82,2
A12,12 0 0,1 94,10
L112,44
A12,12 0 0,1 112,56
L94,90
A12,12 0 0,1 82,98
L38,98
A12,12 0 0,1 26,90
L8,56
A12,12 0 0,1 8,44
L26,10
A12,12 0 0,1 38,2" />
</clipPath>
</defs>
<use xlink:href="#hexagon" x="0" y="0" stroke="orange" stroke-width="12" fill="transparent" />
</svg>
This is my current example I want to re-build:
So my goal is it to pass a color hex code at the end. Is this possible or not?
With colored shadow I mean the darker color at the right inside of each hexagon. Sorry for being to unclear!

I will consider a different hexagon taken from this answer then as a background coloration I will use two layers, the main color and the gradient to simulate the shadow:
.hex {
width: 200px;
display: inline-block;
color:orange;
position:relative;
filter: url('#goo'); /* to get the rounded edge */
}
.hex::before,
.hex::after { /* the polygon shape */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
display:flex;
}
.hex::before{
content: "";
background:
linear-gradient(50deg,transparent 10px, rgba(0,0,0,0.2) 0 calc(100% - 45px),transparent calc(100% - 44px))
100% 100%/ 70% 89% no-repeat,
currentColor; /* Use the color defined by "color" */
padding-top: 86.6%; /* 100%*cos(30) */
}
.hex::after {
content: attr(data-text);
font-size:80px;
position:absolute;
top:18px;
left:18px;
right:18px;
bottom:18px;
background:#fff; /* this should match the main background */
align-items:center;
justify-content:center;
}
<div class="hex" data-text="01"></div>
<div class="hex" data-text="02" style="color:pink;filter:none"></div>
<div class="hex" data-text="03" style="color:lightblue"></div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>

My approach - create a generic SVG and use CSS to change the colors:
Codepen:
https://codepen.io/seanstopnik/pen/6d30d9a0dc54456f9be26d41e9747785
body {
font-family: sans-serif; /* for demo only */
}
.hex {
position: relative;
width: 200px; /* for demo only - see Codepen */
}
.hex__heading {
position: absolute;
top: 50%;
left: 50%;
font-size: 66.6666666667px; /* for demo only - see Codepen */
font-weight: 700;
transform: translate(-50%, -50%);
}
.hex__center {
fill: #fff;
}
.hex--primary .hex__heading {
color: #97db54;
}
.hex--primary .hex__stroke {
fill: #97db54;
}
.hex--primary .hex__shadow {
fill: #6cc245;
}
.hex--secondary .hex__heading {
color: #5fc69e;
}
.hex--secondary .hex__stroke {
fill: #5fc69e;
}
.hex--secondary .hex__shadow {
fill: #4c9f67;
}
.hex--tertiary .hex__heading {
color: #4da2bf;
}
.hex--tertiary .hex__stroke {
fill: #4da2bf;
}
.hex--tertiary .hex__shadow {
fill: #2b648a;
}
<div class="hex hex--primary">
<span class="hex__heading">01</span>
<svg class="hexagon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 174.284">
<path class="hex__stroke" d="M147.988 0H52.012a4.024 4.024 0 00-3.485 2.012L.539 85.129a4.025 4.025 0 000 4.025l47.988 83.117a4.025 4.025 0 003.485 2.013h95.976a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 000-4.025L151.473 2.012A4.024 4.024 0 00147.988 0zm-8.134 160.2H60.146a4.026 4.026 0 01-3.486-2.012L16.806 89.154a4.025 4.025 0 010-4.025L56.66 16.1a4.024 4.024 0 013.486-2.013h79.708a4.024 4.024 0 013.486 2.013l39.854 69.029a4.025 4.025 0 010 4.025l-39.854 69.03a4.026 4.026 0 01-3.486 2.016z"/>
<path class="hex__shadow" d="M199.461 85.129l-15.687-27.17L143.268 16.2l-.012.021L183.2 85.14a4 4 0 010 4.006l-39.849 69.02a4 4 0 01-3.516 2l-82.1-1.079 17.944 15.2h72.306a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 00.003-4.028z"/>
<path class="hex__center" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
</svg>
</div>
<div class="hex hex--secondary">
<span class="hex__heading">02</span>
<svg class="hexagon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 174.284">
<path class="hex__stroke" d="M147.988 0H52.012a4.024 4.024 0 00-3.485 2.012L.539 85.129a4.025 4.025 0 000 4.025l47.988 83.117a4.025 4.025 0 003.485 2.013h95.976a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 000-4.025L151.473 2.012A4.024 4.024 0 00147.988 0zm-8.134 160.2H60.146a4.026 4.026 0 01-3.486-2.012L16.806 89.154a4.025 4.025 0 010-4.025L56.66 16.1a4.024 4.024 0 013.486-2.013h79.708a4.024 4.024 0 013.486 2.013l39.854 69.029a4.025 4.025 0 010 4.025l-39.854 69.03a4.026 4.026 0 01-3.486 2.016z"/>
<path class="hex__shadow" d="M199.461 85.129l-15.687-27.17L143.268 16.2l-.012.021L183.2 85.14a4 4 0 010 4.006l-39.849 69.02a4 4 0 01-3.516 2l-82.1-1.079 17.944 15.2h72.306a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 00.003-4.028z"/>
<path class="hex__center" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
</svg>
</div>
<div class="hex hex--tertiary">
<span class="hex__heading">03</span>
<svg class="hexagon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 174.284">
<path class="hex__stroke" d="M147.988 0H52.012a4.024 4.024 0 00-3.485 2.012L.539 85.129a4.025 4.025 0 000 4.025l47.988 83.117a4.025 4.025 0 003.485 2.013h95.976a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 000-4.025L151.473 2.012A4.024 4.024 0 00147.988 0zm-8.134 160.2H60.146a4.026 4.026 0 01-3.486-2.012L16.806 89.154a4.025 4.025 0 010-4.025L56.66 16.1a4.024 4.024 0 013.486-2.013h79.708a4.024 4.024 0 013.486 2.013l39.854 69.029a4.025 4.025 0 010 4.025l-39.854 69.03a4.026 4.026 0 01-3.486 2.016z"/>
<path class="hex__shadow" d="M199.461 85.129l-15.687-27.17L143.268 16.2l-.012.021L183.2 85.14a4 4 0 010 4.006l-39.849 69.02a4 4 0 01-3.516 2l-82.1-1.079 17.944 15.2h72.306a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 00.003-4.028z"/>
<path class="hex__center" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
</svg>
</div>

I'd recommend using linearGradient: https://jsfiddle.net/um4yhrxj/
I won't do all the work for you though, haha!

SVG icons on a round circle side by side another div, Bootstrap 4.5

I started to get into Bootstrap 4.5 and SVG for icons. I'm having a tough time understanding how it works atm. I want to place the SVG inside a shape (rounded-circle) for now. But would like that shape to be side by side another div. I can't move the div to place them on the same line. Following is a code snippet.
.svg-icon {
display: block;
margin: 0 auto;
position: absolute;
top: calc(50% - 14px);
left: calc(50% - 14px);
}
.poll-icon-container {
height: 50px;
width: 50px;
position: relative;
border-radius: 50%;
background-color: pink;
}
<div class="rounded-circle poll-icon-container text-success">
<svg
width="2em"
height="2em"
viewBox="0 0 18 18"
class="bi bi-box-arrow-in-up-right svg-icon"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
/>
<path
fill-rule="evenodd"
d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
/>
<path
fill-rule="evenodd"
d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
/>
</svg>
</div>
<div>
should be on the right side of the icon
</div>

As long as you are using Bootstrap, lets cover those 2 divs in one parent div and make them display flax in bootstrap way
d-flex - BS class to make block to display: flex;
justify-content-start - BS class to make justify-content: flex-start;
align-items-center - BS class to make align-items: center;
ml-3 - BS sizing class, margin-left: 1rem;
.svg-icon {
display: block;
margin: 0 auto;
position: absolute;
top: calc(50% - 14px);
left: calc(50% - 14px);
}
.poll-icon-container {
height: 50px;
width: 50px;
position: relative;
border-radius: 50%;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="d-flex justify-content-start align-items-center">
<div class="rounded-circle poll-icon-container text-success">
<svg width="2em" height="2em" viewBox="0 0 18 18" class="bi bi-box-arrow-in-up-right svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
/>
<path
fill-rule="evenodd"
d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
/>
<path
fill-rule="evenodd"
d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
/>
</svg>
</div>
<div class="ml-3">
should be on the right side of the icon
</div>
</div>

Add inline css with position: absolute; check below snippet.
.svg-icon {
display: block;
margin: 0 auto;
position: absolute;
top: calc(50% - 14px);
left: calc(50% - 14px);
}
.poll-icon-container {
height: 50px;
width: 50px;
position: relative;
border-radius: 50%;
background-color: pink;
}
<div class="rounded-circle poll-icon-container text-success" style="display:inline-block;">
<svg
width="2em"
height="2em"
viewBox="0 0 18 18"
class="bi bi-box-arrow-in-up-right svg-icon"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
/>
<path
fill-rule="evenodd"
d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
/>
<path
fill-rule="evenodd"
d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
/>
</svg>
</div>
<div style="display: inline-block; margin-left:10px;line-height: 50px; position: absolute;">
should be on the right side of the icon
</div>

how to change svg color when button is hovered

I'm trying to me make an SVG's color change when the button is hovered.
I tried using button:hover + svg, but that doesn't seem to work.
When I run the CSS, the SVG fills to white and it doesn't work when I hover over the button. The only way I see it working is if I don't set an initial fill to orange and let it be black.
What's going wrong?
.box-button {
border: 1px solid orange;
color: orange;
padding: 15px 0px;
text-align: center;
margin: 5px 5px;
width: 90%;
font-size: 1.2rem;
}
.box-button:hover {
background-color: orange;
color: white;
}
.box-button:hover+.icon-svg {
fill: white !important;
}
.icon-svg {
fill: orange;
}
<button class="box-button">
<div class="svg-container">
<svg class="icon-svg" enable-background="new 0 0 612 792" version="1.1" viewBox="0 0 612 792" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path d="m82.983 432.29c-5.728 0-10.372 4.644-10.372 10.372v41.488c0 5.729 4.644 10.373 10.372 10.373 5.729 0 10.373-4.645 10.373-10.373v-41.488c-1e-3 -5.728-4.645-10.372-10.373-10.372z"/>
<path d="m124.47 453.03c-5.728 0-10.372 4.645-10.372 10.372v41.489c0 5.728 4.644 10.372 10.372 10.372s10.372-4.645 10.372-10.372v-41.489c0-5.727-4.644-10.372-10.372-10.372z"/>
<path d="m502.79 508.7c-4.835-3.073-11.244-1.643-14.317 3.191-2.948 4.641-1.765 10.775 2.701 13.984 28.511 19.197 36.06 57.871 16.865 86.381-19.197 28.51-57.871 36.062-86.381 16.865-28.511-19.197-36.062-57.871-16.865-86.381 11.559-17.167 30.896-27.465 51.592-27.476 5.729 0 10.372-4.645 10.372-10.372 0-5.729-4.644-10.372-10.372-10.372-45.827 9e-3 -82.972 37.166-82.962 82.993 9e-3 45.827 37.166 82.972 82.993 82.962 45.827-9e-3 82.972-37.166 82.962-82.993-5e-3 -27.583-13.717-53.361-36.588-68.782z"/>
<path d="m575.96 543.05c-10.049-34.813-34.776-63.516-67.719-78.606v-229.23c1e-3 -3.668-1.936-7.063-5.093-8.93l-228.19-134.84c-3.257-1.925-7.303-1.925-10.559 0l-228.19 134.84c-0.218 0.125-0.374 0.311-0.581 0.456-0.208 0.146-0.404 0.311-0.612 0.477-0.901 0.709-1.675 1.565-2.292 2.531 0 0.072-0.125 0.114-0.166 0.187v0.073c-0.584 1.054-0.981 2.201-1.172 3.392 0 0.311-0.093 0.602-0.125 0.913-0.031 0.312-0.145 0.591-0.145 0.902v269.68c-1e-3 3.668 1.936 7.063 5.093 8.931l228.19 134.84c0.273 0.132 0.553 0.25 0.84 0.353 0.283 0.142 0.574 0.266 0.871 0.373 2.283 0.954 4.853 0.954 7.136 0 0.301-0.107 0.595-0.231 0.882-0.373 0.27-0.124 0.56-0.197 0.83-0.353l61.933-36.604c19.058 66.017 88.022 104.08 154.04 85.027 66.016-19.058 104.08-88.024 85.027-154.04zm-306.28-430.63l53.936 31.874-79.97 47.256c-4.935 2.916-6.572 9.281-3.656 14.215 2.916 4.935 9.28 6.572 14.215 3.656l89.813-53.033 53.936 31.874-207.8 122.76-53.936-31.874 86.888-51.343c4.935-2.916 6.572-9.28 3.656-14.215s-9.281-6.572-14.215-3.656l-96.721 57.161-53.946-31.874 207.8-122.8zm-89.897 216.57v69.256l-53.583-31.667v-69.255l53.583 31.666zm156.23 216.45c-2.76 10.463-4.138 21.242-4.099 32.063 3e-3 4.341 0.23 8.679 0.685 12.996l-52.546 31.065v-33.689c0-5.728-4.644-10.372-10.372-10.372s-10.372 4.645-10.372 10.372v33.689l-207.45-122.58v-245.58l53.594 31.667v87.428c-4e-3 3.672 1.932 7.072 5.093 8.941l74.327 43.927c1.6 0.94 3.423 1.438 5.28 1.441 5.728 0 10.372-4.645 10.372-10.372v-75.188l58.78 34.736v170.4c0 5.729 4.644 10.373 10.372 10.373s10.372-4.645 10.372-10.373v-170.4l187.99-111.09c4.933-2.916 6.567-9.278 3.651-14.21s-9.278-6.567-14.21-3.651l-187.8 110.98-59.122-34.944 207.8-122.8 69.142 40.856v216.05c-66.202-17.46-134.02 22.051-151.48 88.255zm120.37 135.79c-57.284 0-103.72-46.438-103.72-103.72s46.439-103.72 103.72-103.72c57.285 0 103.72 46.438 103.72 103.72-0.063 57.259-46.464 103.66-103.72 103.72z"/>
<path d="m494.58 549.42c-4.02-3.883-10.394-3.883-14.413 0l-39.342 39.343-8.225-8.226c-4.12-3.98-10.687-3.866-14.667 0.254-3.883 4.02-3.883 10.394 0 14.412l15.559 15.559c4.051 4.049 10.616 4.049 14.667 0l46.675-46.675c3.98-4.12 3.866-10.688-0.254-14.667z"/>
</svg>
</div>
Your Orders
</button>

+ is the CSS sibling selector. .icon-svg is not a sibling of your button, it is a child.
Also putting a div inside of a button isn't valid, but most browsers will render it fine. I changed it to a span here though.
Try .box-button:hover .icon-svg instead of .box-button:hover+.icon-svg.
.box-button {
border: 1px solid orange;
color: orange;
padding: 15px 0px;
text-align: center;
margin: 5px 5px;
width: 90%;
font-size: 1.2rem;
}
.box-button:hover {
background-color: orange;
color: white;
}
.box-button:hover .icon-svg {
fill: white !important;
}
.icon-svg {
fill: orange;
}
<button class="box-button">
<span class="svg-container">
<svg class="icon-svg" enable-background="new 0 0 612 792" version="1.1" viewBox="0 0 612 792" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path d="m82.983 432.29c-5.728 0-10.372 4.644-10.372 10.372v41.488c0 5.729 4.644 10.373 10.372 10.373 5.729 0 10.373-4.645 10.373-10.373v-41.488c-1e-3 -5.728-4.645-10.372-10.373-10.372z"/>
<path d="m124.47 453.03c-5.728 0-10.372 4.645-10.372 10.372v41.489c0 5.728 4.644 10.372 10.372 10.372s10.372-4.645 10.372-10.372v-41.489c0-5.727-4.644-10.372-10.372-10.372z"/>
<path d="m502.79 508.7c-4.835-3.073-11.244-1.643-14.317 3.191-2.948 4.641-1.765 10.775 2.701 13.984 28.511 19.197 36.06 57.871 16.865 86.381-19.197 28.51-57.871 36.062-86.381 16.865-28.511-19.197-36.062-57.871-16.865-86.381 11.559-17.167 30.896-27.465 51.592-27.476 5.729 0 10.372-4.645 10.372-10.372 0-5.729-4.644-10.372-10.372-10.372-45.827 9e-3 -82.972 37.166-82.962 82.993 9e-3 45.827 37.166 82.972 82.993 82.962 45.827-9e-3 82.972-37.166 82.962-82.993-5e-3 -27.583-13.717-53.361-36.588-68.782z"/>
<path d="m575.96 543.05c-10.049-34.813-34.776-63.516-67.719-78.606v-229.23c1e-3 -3.668-1.936-7.063-5.093-8.93l-228.19-134.84c-3.257-1.925-7.303-1.925-10.559 0l-228.19 134.84c-0.218 0.125-0.374 0.311-0.581 0.456-0.208 0.146-0.404 0.311-0.612 0.477-0.901 0.709-1.675 1.565-2.292 2.531 0 0.072-0.125 0.114-0.166 0.187v0.073c-0.584 1.054-0.981 2.201-1.172 3.392 0 0.311-0.093 0.602-0.125 0.913-0.031 0.312-0.145 0.591-0.145 0.902v269.68c-1e-3 3.668 1.936 7.063 5.093 8.931l228.19 134.84c0.273 0.132 0.553 0.25 0.84 0.353 0.283 0.142 0.574 0.266 0.871 0.373 2.283 0.954 4.853 0.954 7.136 0 0.301-0.107 0.595-0.231 0.882-0.373 0.27-0.124 0.56-0.197 0.83-0.353l61.933-36.604c19.058 66.017 88.022 104.08 154.04 85.027 66.016-19.058 104.08-88.024 85.027-154.04zm-306.28-430.63l53.936 31.874-79.97 47.256c-4.935 2.916-6.572 9.281-3.656 14.215 2.916 4.935 9.28 6.572 14.215 3.656l89.813-53.033 53.936 31.874-207.8 122.76-53.936-31.874 86.888-51.343c4.935-2.916 6.572-9.28 3.656-14.215s-9.281-6.572-14.215-3.656l-96.721 57.161-53.946-31.874 207.8-122.8zm-89.897 216.57v69.256l-53.583-31.667v-69.255l53.583 31.666zm156.23 216.45c-2.76 10.463-4.138 21.242-4.099 32.063 3e-3 4.341 0.23 8.679 0.685 12.996l-52.546 31.065v-33.689c0-5.728-4.644-10.372-10.372-10.372s-10.372 4.645-10.372 10.372v33.689l-207.45-122.58v-245.58l53.594 31.667v87.428c-4e-3 3.672 1.932 7.072 5.093 8.941l74.327 43.927c1.6 0.94 3.423 1.438 5.28 1.441 5.728 0 10.372-4.645 10.372-10.372v-75.188l58.78 34.736v170.4c0 5.729 4.644 10.373 10.372 10.373s10.372-4.645 10.372-10.373v-170.4l187.99-111.09c4.933-2.916 6.567-9.278 3.651-14.21s-9.278-6.567-14.21-3.651l-187.8 110.98-59.122-34.944 207.8-122.8 69.142 40.856v216.05c-66.202-17.46-134.02 22.051-151.48 88.255zm120.37 135.79c-57.284 0-103.72-46.438-103.72-103.72s46.439-103.72 103.72-103.72c57.285 0 103.72 46.438 103.72 103.72-0.063 57.259-46.464 103.66-103.72 103.72z"/>
<path d="m494.58 549.42c-4.02-3.883-10.394-3.883-14.413 0l-39.342 39.343-8.225-8.226c-4.12-3.98-10.687-3.866-14.667 0.254-3.883 4.02-3.883 10.394 0 14.412l15.559 15.559c4.051 4.049 10.616 4.049 14.667 0l46.675-46.675c3.98-4.12 3.866-10.688-0.254-14.667z"/>
</svg>
</span>
Your Orders
</button>

Aligning Icomoon icons and getting correct shape

Kind of struggling to get my icons aligned and in the proper shape. I'm trying to achieve that in the footer I can print 4 social icons in line each in a cikel, and somewhere else on the page have 4 social icons appearing in line (flexbox), and square. However if I have the icons aligned as square buttons, than the cirkel become ovals.
What is the way to go and to have the icons styled independently and make sure they are responsive?
I just put all the code, a bit much, sorry for that.
.social-container {
display: flex;
/* flex-direction: row; */
flex-wrap: wrap;
justify-content: space-between;
min-height: 0%;
flex: 0;
}
.social-container a {
}
/* #mixin svg {
position: relative;
display: inline-flex;
min-width: 0;
*/
a.svg, a.arrow {
position: relative;
display: inline-flex;
min-width: 0;
}
a.arrow {
text-decoration-line: none;
}
a.svg {
/* display: inline-flex; */
text-decoration-line: none;
position: relative;
}
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}
.social-container a svg {
height: 3vh;
margin-bottom: 10px;
}
.cirkel {
background: #3b5998;
padding: 0.2em;
display: inline-block;
line-height: 0;
-webkit-border-radius: 99%;
-moz-border-radius: 99%;
border-radius: 99%;
}
.cirkel:hover {
background-color: brown;
}
.square {
display: inline-flex;
/* height: 25px;
line-height: 30px; */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-right: 5px;
height: 30px;
width: 80px;
padding-top: 0.2em;
padding-bottom: 0.2em;
padding-right: 0.2em;
}
.square.fb-background {
background: #3b5998;
}
.square.tw-background {
background-color: #4da7de;
}
.square.pi-background {
background-color: #b51205;
}
.square.gp-background {
background-color: #dd4b39;
}
.flex-item {
height: 5%;
}
.name{
font-size: 0.5em;
margin-left: 1em;
}
/* styling individual icons */
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/* obsolete styls */
.access-label {
text-decoration: none;
}
/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
font-size: 32px;
color: red;
}
========================================== */
.icon-home3 {
color:blue;
}
.icon-arrow-left2 {
width: 30px;
min-height: 0vh;
}
.icon-arrow-left2:hover {
background-color:#013e75;
color: white;
}
.icon-facebook:before {
content:'\e041';
}
/* .icon-facebook {
color: #fff;
font-size: 32px;
} */
.icon-facebook {
color: white;
font-size: 20px;
/* width: 20%;
height: 2%; */
padding: 3px;
}
.icon-facebook:hover {
background-color: #2a4784;
}
.icon-google-plus:before {
content:'\e042';
}
.icon-google-plus {
/* width: 20%; * /
height: 2%; */
color: white;
font-size: 20px;
}
.icon-google-plus:hover {
background-color: #c93725;
}
.icon-linkedin2:before {
content:'\e049';
}
.icon-linkedin2 {
background-color: #3371b7;
color: white;
/* width: 20%; */
height: 2%;
}
.icon-linkedin2:hover {
background-color: #1f5da3;
}
.icon-pinterest2:before {
content:'\e043';
}
.icon-pinterest2 {
color: white;
/* width: 20%; */
padding: 3px;
height: 2%;
font-size: 20px;
}
.icon-pinterest:hover {
}
.icon-price-tag {
width: 20px;
height: 25px;
display: inline;
padding-top: 5px;
}
/* same styling icons used in text heading tag <H4> */
.icon-price-tags, .icon-camera, .icon-bubbles {
color: white;
}
.icon-sailing-boat-water {
color: blueviolet;
}
.icon-price-tags, .icon-camera, .icon-bubbles {
height: 25px;
display: inline;
padding-top: 4px;
width: 30px;
min-height: 0vh;
}
.icon-rss:before {
content:'\e00b';
}
.icon-rss {
/* width: 20%; */
height: 2%;
padding: 3px;
background-color: #f26109;
color: white;
}
.icon-rss:hover {
background-color: #de4d00;
}
.icon-search {
color: #ccc;
}
.icon-search:hover {
color: blueviolet;
}
.icon-twitter:before {
content:'\e040';
}
.icon-twitter {
color: white;
/* width: 20%; */
height: 2%;
padding: 3px;
font-size: 20px;
}
.icon-twitter:hover {
background-color: #3993ca;
}
<!doctype html>
<html>
<head>
<title>IcoMoon - SVG Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="demo-files/demo.css">
<link rel="stylesheet" href="demo-files/probeersel.css">
<!-- link rel="stylesheet" href="SVG/cssfolder-SVG_SPRITE/iconizr-svg-sprite.css" -->
<!-- link rel="stylesheet" href="style.css" -->
</head>
<body>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-sailing-boat-water" viewbox="0 0 32 32">
<title>sailing-boat-water</title>
<path d="M21.671 23h0.329c2.209 0 3.999-1.795 3.999-4h-10v-15h-1v15h-10c0 0.876 0.282 1.686 0.759 2.345 3.661-1.772 7.586-1.975 11.486 0.219 1.515 0.852 2.993 1.312 4.426 1.436v0 0zM26 18h-9v-9l9 9zM8 9.5c-3 5-3 8.5-3 8.5h9c0 0-1-1.5-1-6s1-8 1-8c0 0-3 0.5-6 5.5v0zM3 25c0.432-0.319 0.901-0.634 1.405-0.934 4.032-2.406 8.441-2.965 12.82-0.502 4.021 2.262 7.786 1.761 11.12-0.452 0.623-0.414 1.177-0.857 1.655-1.299v1.322c-0.341 0.277-0.709 0.549-1.102 0.81-3.622 2.405-7.778 2.957-12.164 0.491-4.022-2.262-8.065-1.75-11.817 0.489-0.713 0.425-1.353 0.881-1.911 1.336-0.002 0.002-0.004 0.003-0.006 0.005v-1.266zM5.979 26.232c3.592-1.665 7.43-1.813 11.245 0.333 3.481 1.958 6.771 1.846 9.755 0.344v1.109c-3.143 1.433-6.616 1.46-10.245-0.581-3.645-2.050-7.307-1.822-10.755-0.094v-1.11z"></path> </symbol> <symbol id="icon-home3" viewbox="0 0 32 32">
<title>home3</title>
<path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z"></path> </symbol> <symbol id="icon-camera" viewbox="0 0 32 32">
<title>camera</title>
<path d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875s3.973-8.875 8.875-8.875c4.902 0 8.875 3.973 8.875 8.875s-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z"></path> </symbol> <symbol id="icon-file-text" viewbox="0 0 32 32">
<title>file-text</title>
<path d="M27 0h-24c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h24c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM26 28h-22v-24h22v24zM8 14h14v2h-14zM8 18h14v2h-14zM8 22h14v2h-14zM8 10h14v2h-14z"></path> </symbol> <symbol id="icon-profile" viewbox="0 0 32 32">
<title>profile</title>
<path d="M27 0h-24c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h24c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM26 28h-22v-24h22v24zM8 18h14v2h-14zM8 22h14v2h-14zM10 9c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3s-3-1.343-3-3zM15 12h-4c-1.65 0-3 0.9-3 2v2h10v-2c0-1.1-1.35-2-3-2z"></path> </symbol> <symbol id="icon-price-tag" viewbox="0 0 32 32">
<title>price-tag</title>
<path d="M30.5 0h-12c-0.825 0-1.977 0.477-2.561 1.061l-14.879 14.879c-0.583 0.583-0.583 1.538 0 2.121l12.879 12.879c0.583 0.583 1.538 0.583 2.121 0l14.879-14.879c0.583-0.583 1.061-1.736 1.061-2.561v-12c0-0.825-0.675-1.5-1.5-1.5zM23 12c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"></path> </symbol> <symbol id="icon-price-tags" viewbox="0 0 40 32">
<title>price-tags</title>
<path d="M38.5 0h-12c-0.825 0-1.977 0.477-2.561 1.061l-14.879 14.879c-0.583 0.583-0.583 1.538 0 2.121l12.879 12.879c0.583 0.583 1.538 0.583 2.121 0l14.879-14.879c0.583-0.583 1.061-1.736 1.061-2.561v-12c0-0.825-0.675-1.5-1.5-1.5zM31 12c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"></path> <path d="M4 17l17-17h-2.5c-0.825 0-1.977 0.477-2.561 1.061l-14.879 14.879c-0.583 0.583-0.583 1.538 0 2.121l12.879 12.879c0.583 0.583 1.538 0.583 2.121 0l0.939-0.939-13-13z"></path> </symbol> <symbol id="icon-bubbles" viewbox="0 0 36 32">
<title>bubbles</title>
<path d="M34 28.161c0 1.422 0.813 2.653 2 3.256v0.498c-0.332 0.045-0.671 0.070-1.016 0.070-2.125 0-4.042-0.892-5.398-2.321-0.819 0.218-1.688 0.336-2.587 0.336-4.971 0-9-3.582-9-8s4.029-8 9-8c4.971 0 9 3.582 9 8 0 1.73-0.618 3.331-1.667 4.64-0.213 0.463-0.333 0.979-0.333 1.522zM16 0c8.702 0 15.781 5.644 15.995 12.672-1.537-0.685-3.237-1.047-4.995-1.047-2.986 0-5.807 1.045-7.942 2.943-2.214 1.968-3.433 4.607-3.433 7.432 0 1.396 0.298 2.747 0.867 3.993-0.163 0.004-0.327 0.007-0.492 0.007-0.849 0-1.682-0.054-2.495-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049 4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13z"></path> </symbol> <symbol id="icon-spinner3" viewbox="0 0 32 32">
<title>spinner3</title>
<path d="M16 9.472c-1.030 0-1.865-0.835-1.865-1.865v-5.596c0-1.030 0.835-1.865 1.865-1.865s1.865 0.835 1.865 1.865v5.596c0 1.030-0.835 1.865-1.865 1.865z"></path> <path d="M16 31.155c-0.644 0-1.166-0.522-1.166-1.166v-5.596c0-0.644 0.522-1.166 1.166-1.166s1.166 0.522 1.166 1.166v5.596c0 0.644-0.522 1.166-1.166 1.166z"></path> <path d="M11.805 10.48c-0.604 0-1.192-0.314-1.516-0.875l-2.798-4.846c-0.483-0.836-0.196-1.906 0.64-2.389s1.906-0.196 2.389 0.64l2.798 4.846c0.483 0.836 0.196 1.906-0.64 2.389-0.275 0.159-0.576 0.235-0.873 0.235z"></path> <path d="M22.995 29.164c-0.363 0-0.715-0.188-0.91-0.525l-2.798-4.846c-0.29-0.502-0.118-1.143 0.384-1.433s1.143-0.118 1.433 0.384l2.798 4.846c0.29 0.502 0.118 1.143-0.384 1.433-0.165 0.095-0.346 0.141-0.524 0.141z"></path> <path d="M8.729 13.436c-0.277 0-0.557-0.070-0.814-0.219l-4.846-2.798c-0.781-0.451-1.048-1.449-0.597-2.229s1.449-1.048 2.229-0.597l4.846 2.798c0.781 0.451 1.048 1.449 0.597 2.229-0.302 0.524-0.851 0.816-1.415 0.816z"></path> <path d="M28.114 23.927c-0.158 0-0.319-0.040-0.465-0.125l-4.846-2.798c-0.446-0.258-0.599-0.828-0.341-1.274s0.828-0.599 1.274-0.341l4.846 2.798c0.446 0.258 0.599 0.828 0.341 1.274-0.173 0.299-0.486 0.466-0.809 0.466z"></path> <path d="M7.607 17.515h-5.596c-0.837 0-1.516-0.678-1.516-1.515s0.678-1.515 1.516-1.515h5.596c0.837 0 1.516 0.678 1.516 1.515s-0.678 1.515-1.516 1.515z"></path> <path d="M29.989 16.933c-0 0 0 0 0 0h-5.596c-0.515-0-0.933-0.418-0.933-0.933s0.418-0.933 0.933-0.933c0 0 0 0 0 0h5.596c0.515 0 0.933 0.418 0.933 0.933s-0.418 0.933-0.933 0.933z"></path> <path d="M3.886 24.394c-0.483 0-0.954-0.251-1.213-0.7-0.386-0.669-0.157-1.525 0.512-1.911l4.846-2.798c0.669-0.387 1.525-0.157 1.911 0.512s0.157 1.525-0.512 1.911l-4.846 2.798c-0.22 0.127-0.461 0.188-0.698 0.188z"></path> <path d="M23.27 12.736c-0.322 0-0.636-0.167-0.809-0.466-0.258-0.446-0.105-1.016 0.341-1.274l4.846-2.798c0.446-0.257 1.016-0.105 1.274 0.341s0.105 1.016-0.341 1.274l-4.846 2.798c-0.147 0.085-0.307 0.125-0.465 0.125z"></path> <path d="M9.004 29.397c-0.218 0-0.438-0.055-0.64-0.172-0.613-0.354-0.823-1.138-0.469-1.752l2.798-4.846c0.354-0.613 1.138-0.823 1.752-0.469s0.823 1.138 0.469 1.752l-2.798 4.846c-0.237 0.411-0.668 0.641-1.112 0.641z"></path> <path d="M20.196 9.664c-0.158 0-0.319-0.040-0.465-0.125-0.446-0.258-0.599-0.828-0.341-1.274l2.798-4.846c0.258-0.446 0.828-0.599 1.274-0.341s0.599 0.828 0.341 1.274l-2.798 4.846c-0.173 0.299-0.486 0.466-0.809 0.466z"></path> </symbol> <symbol id="icon-search" viewbox="0 0 32 32">
<title>search</title>
<path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path> </symbol> <symbol id="icon-arrow-up2" viewbox="0 0 32 32">
<title>arrow-up2</title>
<path d="M27.414 12.586l-10-10c-0.781-0.781-2.047-0.781-2.828 0l-10 10c-0.781 0.781-0.781 2.047 0 2.828s2.047 0.781 2.828 0l6.586-6.586v19.172c0 1.105 0.895 2 2 2s2-0.895 2-2v-19.172l6.586 6.586c0.39 0.39 0.902 0.586 1.414 0.586s1.024-0.195 1.414-0.586c0.781-0.781 0.781-2.047 0-2.828z"></path> </symbol> <symbol id="icon-arrow-right2" viewbox="0 0 32 32">
<title>arrow-right2</title>
<path d="M19.414 27.414l10-10c0.781-0.781 0.781-2.047 0-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828 0s-0.781 2.047 0 2.828l6.586 6.586h-19.172c-1.105 0-2 0.895-2 2s0.895 2 2 2h19.172l-6.586 6.586c-0.39 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z"></path> </symbol> <symbol id="icon-arrow-left2" viewbox="0 0 32 32">
<title>arrow-left2</title>
<path d="M12.586 27.414l-10-10c-0.781-0.781-0.781-2.047 0-2.828l10-10c0.781-0.781 2.047-0.781 2.828 0s0.781 2.047 0 2.828l-6.586 6.586h19.172c1.105 0 2 0.895 2 2s-0.895 2-2 2h-19.172l6.586 6.586c0.39 0.39 0.586 0.902 0.586 1.414s-0.195 1.024-0.586 1.414c-0.781 0.781-2.047 0.781-2.828 0z"></path> </symbol> <symbol id="icon-google-plus" viewbox="0 0 32 32">
<title>google-plus</title>
<path d="M10.181 14.294v3.494h5.775c-0.231 1.5-1.744 4.394-5.775 4.394-3.475 0-6.313-2.881-6.313-6.431s2.838-6.431 6.313-6.431c1.981 0 3.3 0.844 4.056 1.569l2.762-2.662c-1.775-1.656-4.075-2.662-6.819-2.662-5.631 0.006-10.181 4.556-10.181 10.188s4.55 10.181 10.181 10.181c5.875 0 9.775-4.131 9.775-9.95 0-0.669-0.075-1.181-0.163-1.688h-9.613z"></path> <path d="M32 14h-3v-3h-3v3h-3v3h3v3h3v-3h3z"></path> </symbol> <symbol id="icon-facebook" viewbox="0 0 32 32">
<title>facebook</title>
<path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path> </symbol> <symbol id="icon-twitter" viewbox="0 0 32 32">
<title>twitter</title>
<path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path> </symbol> <symbol id="icon-rss" viewbox="0 0 32 32">
<title>rss</title>
<path d="M4.259 23.467c-2.35 0-4.259 1.917-4.259 4.252 0 2.349 1.909 4.244 4.259 4.244 2.358 0 4.265-1.895 4.265-4.244-0-2.336-1.907-4.252-4.265-4.252zM0.005 10.873v6.133c3.993 0 7.749 1.562 10.577 4.391 2.825 2.822 4.384 6.595 4.384 10.603h6.16c-0-11.651-9.478-21.127-21.121-21.127zM0.012 0v6.136c14.243 0 25.836 11.604 25.836 25.864h6.152c0-17.64-14.352-32-31.988-32z"></path> </symbol> <symbol id="icon-linkedin2" viewbox="0 0 32 32">
<title>linkedin2</title>
<path d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z"></path> <path d="M2 12h6v18h-6v-18z"></path> <path d="M8 7c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z"></path> </symbol> <symbol id="icon-pinterest2" viewbox="0 0 32 32">
<title>pinterest2</title>
<path d="M16 0c-8.825 0-16 7.175-16 16s7.175 16 16 16 16-7.175 16-16-7.175-16-16-16zM16 29.863c-1.431 0-2.806-0.219-4.106-0.619 0.563-0.919 1.412-2.431 1.725-3.631 0.169-0.65 0.863-3.294 0.863-3.294 0.45 0.863 1.775 1.594 3.175 1.594 4.181 0 7.194-3.844 7.194-8.625 0-4.581-3.738-8.006-8.544-8.006-5.981 0-9.156 4.019-9.156 8.387 0 2.031 1.081 4.563 2.813 5.369 0.262 0.125 0.4 0.069 0.463-0.188 0.044-0.194 0.281-1.131 0.387-1.575 0.031-0.137 0.019-0.262-0.094-0.4-0.575-0.694-1.031-1.975-1.031-3.162 0-3.056 2.313-6.019 6.256-6.019 3.406 0 5.788 2.319 5.788 5.637 0 3.75-1.894 6.35-4.356 6.35-1.363 0-2.381-1.125-2.050-2.506 0.394-1.65 1.15-3.425 1.15-4.613 0-1.063-0.569-1.95-1.756-1.95-1.394 0-2.506 1.438-2.506 3.369 0 1.225 0.412 2.056 0.412 2.056s-1.375 5.806-1.625 6.887c-0.281 1.2-0.169 2.881-0.050 3.975-5.156-2.012-8.813-7.025-8.813-12.9 0-7.656 6.206-13.863 13.862-13.863s13.863 6.206 13.863 13.863c0 7.656-6.206 13.863-13.863 13.863z"></path> </symbol> </defs> </svg>
<header class="bgc1 clearfix">
<div class="mhl">
<p>
SVG Icons - Generated by IcoMoon
</p>
</div>
</header>
<svg class="icon icon-sailing-boat-water" aria-hidden="true" focusable="false"> <use xlink:href="#icon-sailing-boat-water"></use> </svg> <br />
<br />
<span class="cirkel"><svg preserveaspectratio="none" class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg></span> <br />
<br />
<span class="cirkel"><svg preserveaspectratio="none" class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg></span> <br />
<br />
<span class="social-container" style="width: 400px;"> <span class="square fb-background"><svg preserveaspectratio="none" class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg></span> <span class="square tw-background"><svg preserveaspectratio="none" class="icon icon-twitter"><use xlink:href="#icon-twitter"></use></svg></span> <span class="square pi-background"><svg preserveaspectratio="none" class="icon icon-pinterest2"><use xlink:href="#icon-pinterest2"></use></svg></span> <span class="square gp-background"><svg preserveaspectratio="none" class="icon icon-google-plus"><use xlink:href="#icon-google-plus"></use></svg></span>
</span>
<p>
</body>
</html>