CODEWITHSUNDEEP
htmlcsssvg
Eva
Eva

Reputation: 294

How to make this Facebook SVG icon?

I have to do it like this enter image description here

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>

Upvotes: 0

Views: 4606

Answers (3)

Danny &#39;365CSI&#39; Engelman
Danny &#39;365CSI&#39; Engelman

Reputation: 21173

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

Upvotes: 0

s.kuznetsov
s.kuznetsov

Reputation: 15213

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>

Upvotes: 1

doğukan
doğukan

Reputation: 27401

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>

Upvotes: 3

Related Questions