Как лучше сверстать иконку facebook?

Question

Мне нужно сделать такой элемент:

Лучше сделать отдельный элемент сзади и на него наложить svg?

(я не знаю как это сделать, если знаете, покажите)

Или как я, просто задать padding(и) от svg?

.facebook_logo {
  fill: #ffffff;
  display: inline-block;
  width: 11px;
  height: 20px;
  background: #2f3c4d;
  padding: 9px 14px;
  border-radius: 10px;
}

<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

Если Вы хотите добавить иконки, которые являются достаточно распространенными, то самым простым вариантом будет воспользоваться библиотеками типа Font Awesome, которая позволяет выбрать способ вставки (тег <i>, Unicode, или SVG):

i {
  font-size: 100px;
  color: blue;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet" />
<i class="fab fa-facebook-square"></i>

Более подробно о том как добавлять иконки FontAwesome я уже отвечал здесь:

Как добавить Font Awesome в кнопку через CSS

Answer 2

Можно использовать ваш вариант верстки иконки и даже сделать анимацию при наведении

.facebook_logo {
    fill: #ffffff;
    display: inline-block;
    width: 11px;
    height: 20px;
    background: #2f3c4d;
    padding: 9px 14px;
    border-radius: 10px;
    transition: all 1s;
}
.facebook_logo:hover {
width: 22px;
height: 40px;
border-radius: 27px;
background: dodgerblue;
fill:gold;
}

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

Но всё же лучше использовать варианты иконок SVG с отдельными path, для контура логотипа и фона.
В этом случае иконка будет и респонсивной и возникают широкие возможности для анимирования.

#1 Анимация рисования контура логотипа с последующей закраской

.container {
width:7vw;
height:7vh;
}
.back {
fill:#485a96;
}
.logo {
fill:#485a96;
stroke: #fff;
stroke-width:3;
}

<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 266.893 266.895">

<path class="back" d="M252.164 266.895c8.134 0 14.729-6.596 14.729-14.73V14.73c0-8.137-6.596-14.73-14.729-14.73H14.73C6.593 0 0 6.594 0 14.73v237.434c0 8.135 6.593 14.73 14.73 14.73h237.434z" />

<path class="logo" stroke-dasharray="0,734" d="M184.152 266.895V163.539h34.692l5.194-40.28h-39.887V97.542c0-11.662 3.238-19.609 19.962-19.609l21.329-.01V41.897c-3.689-.49-16.351-1.587-31.08-1.587-30.753 0-51.807 18.771-51.807 53.244v29.705h-34.781v40.28h34.781v103.355h41.597z"  >
   <!-- Анимация рисования линии -->
<animate id="an" attributeName="stroke-dasharray" begin="svg1.click" dur="1.5s" values="0,734;734,0" fill="freeze" restart="whenNotActive" /> 
   <!-- Анимация закраски линии -->
<animate attributeName="fill" begin="an.end" dur="0.8s" values="#485a96;#fff" fill="freeze" restart="whenNotActive" /> 

</path>

</svg>
</div>

#2 Анимация с использованием фильтра saturate(10%)

.container {
width:7vw;
height:7vh;

}

.container:not(:hover) {
  transition: 1s;
  filter: saturate(0%);
  -webkit-filter: saturate(0%);
  }
.container:hover {
  transition: 1s;
}
.back {
fill:#485a96;
}
.logo {
fill:orange;
}

<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 266.893 266.895">

<path class="back" d="M252.164 266.895c8.134 0 14.729-6.596 14.729-14.73V14.73c0-8.137-6.596-14.73-14.729-14.73H14.73C6.593 0 0 6.594 0 14.73v237.434c0 8.135 6.593 14.73 14.73 14.73h237.434z" />

<path class="logo" stroke-dasharray="0,734" d="M184.152 266.895V163.539h34.692l5.194-40.28h-39.887V97.542c0-11.662 3.238-19.609 19.962-19.609l21.329-.01V41.897c-3.689-.49-16.351-1.587-31.08-1.587-30.753 0-51.807 18.771-51.807 53.244v29.705h-34.781v40.28h34.781v103.355h41.597z"  >
</path>

</svg>
</div>

3# Анимация заполнения контура лого белым цветом

Анимация реализуется за счет изменения атрибута dy SVG фильтра feFlood

var svg1 = document.getElementById("svg1"),
  paint1 = document.getElementById('an_paint'),
  clear1 = document.getElementById('an_clear');
  
 svg1.addEventListener('mouseover', () => {
   paint1.beginElement();
}); 

   svg1.addEventListener('mouseleave', () => {
   clear1.beginElement();
});

#container {
width:10vw;
height:10vh;
}

<div id="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 266.893 266.895"> 
<defs>
 <filter id="filter1" x="0%" y="0%">
      <feFlood flood-color="#485a96" />
      <feOffset dy="0">
      <!-- Анимация заполнения контура лого белым цветом       -->
      <animate id="an_paint" attributeName="dy" values="0;250" dur="0.5s" begin="indefinite" end="gr1.mouseout" restart="whenNotActive" fill="freeze"/>  
          <!-- Анимация исчезновения закраски лого      -->
       <animate id="an_clear" attributeName="dy" values="250;0" dur="0.5s" begin="indefinite" restart="whenNotActive" fill="freeze"/>    
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>
  
 </defs>


<path class="back" d="M252.164 266.895c8.134 0 14.729-6.596 14.729-14.73V14.73c0-8.137-6.596-14.73-14.729-14.73H14.73C6.593 0 0 6.594 0 14.73v237.434c0 8.135 6.593 14.73 14.73 14.73h237.434z" fill="#485a96"/>

<path id="logo"  d="M184.152 266.895V163.539h34.692l5.194-40.28h-39.887V97.542c0-11.662 3.238-19.609 19.962-19.609l21.329-.01V41.897c-3.689-.49-16.351-1.587-31.08-1.587-30.753 0-51.807 18.771-51.807 53.244v29.705h-34.781v40.28h34.781v103.355h41.597z" fill="#fff" filter="url(#filter1)" >


</path>
</svg>
</div>

Answer 3

Блок социальных иконок в footer

В этом ответе блок социальных иконок выполнен на основе Font Awesome и расположен в footer. Добавлена стилизация иконок при наведении.

Добавлены ссылки для каждой иконки.

В принципе это готовая заготовка для макета веб странички, которую вы можете изменить, доработать по своему вкусу.

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex: 1 0 auto;
}


.header {
  background: #061D25;
  font-size:24px;
  color:#70726F;
  text-align:center;
  height:15%;
}
.content {
  background: #d3d3d3;
}
footer {

  background: #061D25;
  padding: 10px 0;
  text-align: center;
  height:5%;
}
footer a {
  color: #70726F;
  font-size: 20px;
  padding: 10px;
  border-right: 1px solid #70726F;
  transition: all .5s ease;
}
footer a:first-child {
  border-left: 1px solid #70726F;
}
footer a:hover {
  color: white;
}

<!DOCTYPE html>
<html lang="rus">
<head>
    <meta charset="utf-8">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
    
</head>
<body>
    <div class="wrapper">
        <div class="header">Header</div>
        <div class="content">Content</div>
    </div>
    
<footer>
   
  <a href="#"><i class="fa fa-facebook"></i></a>
  <a href="#"><i class="fa fa-twitter"></i></a>
  <a href="#"><i class="fa fa-linkedin"></i></a>
  <a href="#"><i class="fa fa-google-plus"></i></a>
  <a href="#"><i class="fa fa-skype"></i></a>
</footer>
</body>
</html>

БЛОГ НА HUSL

Как лучше сверстать иконку facebook?

Ответы (3 шт):

Блок социальных иконок в footer