FontAwesome 5 - Многоцветный значок - PullRequest
Новая
       9

FontAwesome 5 - Многоцветный значок

0 голосов
/ 30 сентября 2018

FontAwesome 5 предлагает тысячи иконок, созданных с помощью SVG.Таким образом, можно легко раскрасить весь значок, используя fill.Но что, если я хочу использовать несколько цветов?Например, учитывая значок Google , я хочу раскрасить его так:

Google Logo

Ответы [ 2 ]

0 голосов
/ 01 октября 2018

Используя градиент для цвета и двух значков, мы можем добиться этого, но это остается хакерским способом, и вам нужно обрабатывать каждый случай (значок + окраска) конкретно: 

.fa-google path{
  fill:url(#grad1);
}
.fa-google + .fa-google path{
  fill:url(#grad2);
}
.icon {
  display:inline-block;
  position:relative;
}
.fa-google + .fa-google {
   position:absolute;
   left:0;
   top:0;
   clip-path: polygon(0% 0%,120% 0%,0% 75%);
}
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" ></script>
<svg style="width:0;height:0;">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="30%" x2="50%" y2="0%">
      <stop offset="50%" stop-color="#34a853" />
      <stop offset="50%" stop-color="#4285f4" />
    </linearGradient>
    <linearGradient id="grad2" x1="0%" y1="30%" x2="50%" y2="0%">
      <stop offset="50%" stop-color="#fbbc05" />
      <stop offset="50%" stop-color="#ea4335" />
    </linearGradient>
  </defs>
</svg>
<div class="icon"> 
<i class="fab fa-google fa-7x"></i>
<i class="fab fa-google fa-7x"></i>
</div>
0 голосов
/ 30 сентября 2018

Невозможно добиться этого с помощью FontAwesome (или любого другого доступного шрифта значков), не пачкая рук - то есть, изменяя шрифт и создавая свои собственные HTML и CSS поверх созданных вами частичных значков символов..

Создайте каждую цветную часть иконки отдельно как символ и сложите их друг над другом.В примере используются два существующих значка FA для отображения техники: 

.stack-icons {
  position: absolute;
}

.stack-icons i[class*=fa-] {
  position: absolute;
  color: orange;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.stack-icons i[class*=fa-]+i[class*=fa-] {
  color: #a00;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="stack-icons">
  <i class="far fa-circle"></i>
  <i class="fas fa-angle-up"></i>
</div>
...