How to make this Facebook SVG icon? - html

Question

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>

Answer 1

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>

Answer 2

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>

Answer 3

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