Прозрачный значок как svg или <i>тег с цветным фоном - PullRequest
Новая
       29

Прозрачный значок как svg или <i>тег с цветным фоном

0 голосов
/ 08 мая 2019

Вот моя проблема:

У меня есть раздел с некоторыми социальными иконками.Этот раздел находится в более широком элементе div с фоновым изображением.Теперь я хочу придать каждому значку округлый белый фон, но хочу, чтобы значок был прозрачным, поэтому у меня будет приятный эффект, но я не хочу делать это с фотошопом (изображение в формате png), потому что это было бы проще ина самом деле это не моя цель.

Я хочу сделать это с помощью HTML, Font-Awesome и CSS.

Вот моя цель:

enter image description here

А вот моя разметка и CSS:

HTML: 

<div class="splash-image">
    <div class="letterhead">
      <ul class="social">
        <li><i class="fab fa-facebook-f"></i></li>
        <li><i class="fab fa-twitter"></i></li>
        <li><i class="fab fa-linkedin-in"></i></li>
        <li><i class="fab fa-instagram"></i></li>
      </ul>
    </div>
  </div>

SCSS: 

.splash-image {
    font-size: 1.9rem;
    text-transform: uppercase;
    font-weight: 100;
    background-image: url(../images/myimage.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 96vh;
    .letterhead {
        .social {
            li {
                display: inline-block;
                width: 30px;
                height: 30px;
                background: white;
                i::before{
                    background:transparent;
                }
            }
        }
    }
}

Прежде всего: это выполнимо

Ответы [ 2 ]

2 голосов
/ 09 мая 2019

Если вы очень преданы своей миссии использования только этих технологий, тогда можно использовать фильтр и технику зеленого экрана для достижения вашей цели. Но результат немного хрустящий, и я бы рекомендовал использовать SVG-решение - для этого и создан SVG. 

body{
  background-image: url("https://images.unsplash.com/photo-1501630834273-4b5604d2ee31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}	

.circle{
	border-radius: 50%;
	margin: 0.3em;
	font-size: 4em;
	}
	
.fa-twitter{
  background: white;
	color: red;
  padding: 0.15em 0.19em;
	}


.fa-facebook{
  background: white;
	color: red;
  padding: 0.13em 0.41em;
	}

.redknockout {
  filter: url(#red-knockout);
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">

<i class="fa fa-twitter circle redknockout"></i>
<i class="fa fa-facebook circle redknockout"></i>

<svg>
  <defs>
    <filter id="red-knockout">
      <feColorMatrix type="matrix"
                     values="1 0 0 0 0 
                             0 1 0 0 0 
                             0 0 1 0 0 
                             -1 1 1 0 0"/>
    </filter>
  </defs>
</svg>
0 голосов
/ 09 мая 2019

Вместо использования иконок Font-Awesome вы можете использовать svg. В SVG, если вы рисуете путь, где часть рисуется по часовой стрелке, а другая против часовой стрелки, вы получаете отверстие: 

body{background:gold}
    <svg viewBox="0 0 26 26" width="100">  
      <path d="M0,0 L26,0 26,26 0,26 0,0 M21,5 5,5 5,21 21,21 21,5" />
    </svg>

Так же, как вы можете создать в SVG круг с отверстием социальной иконки: 

body{background:gold;}
<svg viewBox="0 0 26 26" width="30">
  <path d="M2,13A11,11 0 0 0 24,13A11,11 0 0 0 2,13
           M19.805,7.708
			c-0.334,0.446-0.667,0.892-1.022,1.365c0.403-0.106,0.822-0.216,1.24-0.326c0.019,0.023,0.036,0.047,0.055,0.07
			c-0.087,0.123-0.161,0.259-0.264,0.367c-0.331,0.353-0.784,0.642-0.98,1.056c-0.197,0.414-0.115,0.952-0.201,1.427
			c-0.103,0.558-0.215,1.12-0.392,1.658c-0.555,1.682-1.577,3.028-3.007,4.072c-0.75,0.549-1.583,0.949-2.468,1.178
			c-1.351,0.349-2.726,0.382-4.108,0.087c-0.786-0.167-1.515-0.448-2.216-0.823c-0.095-0.051-0.173-0.134-0.245-0.242
			c1.4-0.03,2.714-0.242,3.812-1.196c-1.171-0.268-2.009-0.871-2.437-2.066c0.319-0.03,0.593-0.056,0.868-0.082
			c-1.148-0.626-1.847-1.475-1.914-2.851c0.409,0.114,0.737,0.206,1.135,0.317c-0.312-0.437-0.594-0.764-0.801-1.133
			C6.407,9.781,6.45,8.941,6.788,8.107c0.08-0.197,0.199-0.271,0.386-0.058c0.839,0.958,1.839,1.723,3.03,2.167
			c0.796,0.297,1.65,0.439,2.483,0.63c0.042,0.01,0.17-0.164,0.187-0.265c0.077-0.449,0.081-0.915,0.198-1.351
			c0.218-0.806,0.782-1.369,1.526-1.683c1.085-0.458,2.146-0.341,3.084,0.407c0.294,0.233,0.562,0.205,0.866,0.086
  c0.378-0.148,0.756-0.295,1.135-0.443C19.723,7.635,19.764,7.672,19.805,7.708z"/></svg>
...