Aligning Icomoon icons and getting correct shape - html
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>
Related
Can you make a star path progress bar with transparent background?
So i'm making a website and i wanted to try add ratings to items but can't find a way to remove the white background off this path
using font awesome doesnt quite look how i wanted it to so i started looking into svg paths, i found some code that pretty much does what i want but cant figure out how to remove the white fill/background on it
* {
box-sizing: border-box;
}
.rating {
width: 120px;
height: 24px;
position: relative;
background-color: gray;
}
.rating progress.rating-bg {
-webkit-appearance: none;
-moz-appearence: none;
appearance: none;
border: none;
display: inline-block;
height: 24px;
width: 100%;
color: orange;
}
.rating progress.rating-bg::-webkit-progress-value {
background-color: orange;
}
.rating progress.rating-bg::-moz-progress-bar {
background-color: orange;
}
.rating svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<svg style="display:none;">
<defs>
<symbol id="fivestars">
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd"/>
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd" transform="translate(24)"/>
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd" transform="translate(48)"/>
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd" transform="translate(72)"/>
<path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z M0 0 h24 v24 h-24 v-24" fill="white" fill-rule="evenodd" transform="translate(96)"/>
</symbol>
</defs>
</svg>
<div class="rating">
<!-- <div class="rating-bg" style="width: 90%;"></div> -->
<progress class="rating-bg" value="4.5" max="5"></progress>
<svg><use xlink:href="#fivestars"/></svg>
</div>
CSS Left align div regarding a center align parent div
My issue is certainly very easy regarding that i am new in css.
I will show you first a picture of my issue :
I am tryin to put the grey to the left of the content alignes with my other div. The issue is that my grey div is always centered.
.row {
display: flex !important;
justify-content: center;
align-items: center !important;
}
.payment-title-div {
color: #fff;
background: #1282a2;
width: 70%;
}
.u-left {
padding-top: 0.5em;
}
.return-div {
padding-left: 15%;
}
.payment-div {
background-color: lightgray;
width: 50%;
height: 400px;
}
<div class="row">
<div class="payment-title-div">
<h1 class="u-left size12">
<svg class="lock-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shield-lock" viewBox="0 0 16 16">
<path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
<path d="M9.5 6.5a1.5 1.5 0 0 1-1 1.415l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99a1.5 1.5 0 1 1 2-1.415z"/>
</svg> <strong>Paiement sécurisé</strong>
</h1>
</div>
<div class="return-div">
<a class="titre" href="books"><svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
<path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
</svg>Retour à l'annonce</a>
</div>
<div class="payment-div">
</div>
</div>
Any indication ?
BR
Well I've copied your code and I didn't get the exact same from your picture, but I'd recommend this changes in your CSS code:
.row {
display: flex !important;
flex-direction: column; /* set the direction as column (one element above another) */
align-items: flex-start; /* align at start (left) */
}
.payment-title-div {
color: #fff;
background: #1282a2;
width: 100%; /* I've changed this to 100% */
}
.u-left {
padding-top: 0.5em;
}
.return-div {
/* padding-left: 15%; remove this padding */
}
.payment-div {
background-color: lightgray;
width: 50%;
height: 400px;
}
You can also check this Flexbox Guide to understand better how to work with flex boxes, It's really awesome am I right?
How to make this Facebook SVG icon?
I have to do it like this
I want to make this icon from two elements. There are should be blue background and svg. How can I make this?
This is my code:
.facebook_logo {
fill: white;
stroke: black;
display: inline-block;
width: 22px;
height: 40px;
}
<svg display="none">
<symbol id="facebook" viewBox="0 0 23.101 23.101">
<path d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
h2.516V4.458z"/>
</symbol>
</svg>
<svg class="facebook_logo">
<use xlink:href="#facebook"></use>
</svg>
Use same width & height and add some padding.
.facebook_logo {
fill: white;
stroke: black;
display: inline-block;
width: 20px;
height: 20px;
background: #000;
padding: 10px; /* your icon's total width & height is 40px */
border-radius: 8px;
}
<svg display="none">
<symbol id="facebook" viewBox="0 0 23.101 23.101">
<path d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
h2.516V4.458z"/>
</symbol>
</svg>
<svg class="facebook_logo">
<use xlink:href="#facebook"></use>
</svg>
This is an example using flex on a parent div + hover;
.facebook_logo {
fill: white;
stroke: black;
display: inline-block;
width: 22px;
height: 40px;
}
.facebook_ {
background-color: #3b5998;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20%;
transition: .3s;
cursor: pointer;
}
.facebook_:hover {
background-color: grey;
}
<svg display="none">
<symbol id="facebook" viewBox="0 0 23.101 23.101">
<path d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
h2.516V4.458z"/>
</symbol>
</svg>
<div class="facebook_">
<svg class="facebook_logo">
<use xlink:href="#facebook"></use>
</svg>
<div>
<svg id=FaceBookLogo width=100px viewBox='0 0 300 300'>
<rect fill='#3b5998' width='100%' height='100%' rx='15%'/>
<path fill='white' d='M110 80c0-1 0-5 1-9 0-5 2-10 6-15 3-5 8-10 16-14 7-4
18-6 31-6h38v42h-28c-3 0-5 1-8 3-2 2-3 4-3 6v26h39c0
5-1 10-1 15l-1 13c-1 4-1 8-2 12h-35v115h-52v-115
h-25v-39h25v-32z'/>
</svg>
<style>
#FaceBookLogo rect{
fill:var(--FBblue,#3b5998);
}
#FaceBookLogo path{
fill:var(--FBwhite,white)
}
#FaceBookLogo:hover{
--FBblue:green;
--FBwhite:gold;
width:150px;
}
</style>
I used https://yqnn.github.io/svg-path-editor/ to multiply the path definition by a scale 10 to get rid of all decimal positions and still maintain some accuracy in the letter F outline.
Now play with the 300 viewBox size to scale the letter, and change M110 80 at the start of the path (x y) to position the letter.
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>
Change path fill for SVG when hovering over a <li>
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>