Как настроить два цвета в шрифте Awesome?

Я хотел бы использовать значок Facebook Font Awesome, но мне трудно правильно регулировать цвета. Мой цвет фона веб-сайта серый, и я хотел бы иметь значок со смесью белого & синий, но объем цветов не корректируется должным образом. Ниже мой HTML код:Как настроить два цвета в шрифте Awesome?

<a class="list-group-item" href="https://www.facebook.com/pages/Scientific-Editing-and-Proofreading/726988900763622" target="_blank"><i class="fa fa fa-facebook-square fa-5x fa-cog-fa"></i></a>

И следующий мой CSS:

.fa-cog-fa { 
color: white; 
background-color:blue; 
}

И вы можете увидеть окончательный вид под следующей ссылке: this is how my code at the end appear

Как вы видите, синий цвет настолько, что пересекает границы белого цвета. Как я могу исправить эту проблему?

источник

2015-08-21 Ali

ваш код не работают, вы можете сделать демо самостоятельно? – AleshaOleg

Как вы хотите, чтобы он выглядел в конце? Должен ли значок иметь синее свечение/границу? –

Вы не можете, легко. Fontawesome (или любой шрифт, если на то пошло) имеет только два «цвета»: цвет переднего плана и прозрачный. Использование шрифтов с несколькими цветами требует какой-либо накладной техники (I.e. Вставка двух значков поверх друг друга), что может оказаться сложной задачей.

Если вы хотите цвета, придерживайтесь SVG или даже PNG.

источник

2015-08-21 21:44:23 Krumelur

Не могли бы вы сослаться на некоторые хорошие уроки и статьи, объяснив, как я могу это сделать с помощью SVG? – Ali

Непросто использовать SVG, чем любое другое изображение. Используйте его так же, как PNG, например, используя атрибут CSS-фона. Вот двухцветный значок SVG Facebook, например https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg – Krumelur

Я бы порекомендовал вам использовать SVG Font Awesome для получения эффекта, который вы ищете. Используя «font», псевдоэлемент :: перед продолжением предшествует самому элементу. При использовании SVG он идеально подходит для элемента.

Вы можете узнать более подробную информацию по этому адресу: https://css-tricks.com/icon-fonts-vs-svg/

источник

2015-08-21 21:46:38 sayhelloelijah

Это потому, что это как установить шрифт. Вы можете использовать другой шрифт facebook <i class="fa fa-facebook'></i>, который FontAwesome использовал, а затем манипулировал им с помощью CSS, чтобы посмотреть что-то подобное. Вот пример скрипки. http://jsfiddle.net/q1pL3bop/1/

источник

2015-08-21 22:04:09

замечательный ... он отлично работает. – Ali

Вы можете складывать несколько значков FontAwesome вместе и с помощью CSS добавлять дополнительное форматирование. fa-square и fa-facebook могут хорошо сочетаться друг с другом, хотя вам придется поиграть с выравниванием и позиционированием, чтобы все было правильно.

Basic разметки для стека:

<span class="fa-stack fa-5x"> 
    <i class="fa fa-square fa-stack-2x"></i> 
    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i> 
</span>

Документация: http://fortawesome.github.io/Font-Awesome/examples/

Demo с цветами, неряшливо выровненных: http://codepen.io/blindingstars/pen/WvVevE

источник

2015-08-23 00:56:27 Stephy

Как настроить два цвета в шрифте Awesome?

ответ

Смежные вопросы