FontAwesome 5 иконок с не выравниванием контуров - PullRequest
Новая
       57

FontAwesome 5 иконок с не выравниванием контуров

1 голос
/ 11 декабря 2019

Я пытаюсь создать прототип простой кнопки «Мне нравится» с помощью FontAwesome 5. Нажатие на нее должно переключать между заполненным красным значком сердца и незаполненным значком сердца с черной рамкой. Дело в том, что я хочу, чтобы черная рамка оставалась вокруг сердца, когда она заполняется. JS достаточно прост, но чтобы создать границу, я укладываю сердце FontAwesome в обычном стиле поверх Solid, но они не выстраиваются правильно. Я получаю красное внутреннее сердце, переполняющее границу и выпадающее по сторонам контура. 

[...document.querySelectorAll('.like')].forEach(heart => {
    heart.addEventListener('click', () => {
        heart.classList.toggle('liked');
        let fill = heart.querySelector('.fill');
        if (heart.classList.contains('liked')) {
            fill.style.opacity = '100%';
        } else {
            fill.style.opacity = '0%';
        }
    });
});
.like {
    display: inline-block;
    cursor: pointer;
    user-select: none;
}
.like > .fill {
    color: red;
    opacity: 0%;
    transition: opacity 0.25s;
}
<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<div class="like fa-stack">
    <i class="fas fa-heart fa-stack-1x fill"></i>
    <i class="far fa-heart fa-stack-1x border"></i>
</div>

Поскольку FA5 заменяет значки на SVG, такие вещи, как бордюр и тень для текста, не работают. Я даже пробовал такие вещи, как нацеливание на элемент path внутри и установка его ширины и цвета обводки, но я не могу таким образом затушить середину, и при использовании его с этим стеком все еще возникают проблемы смещения.

Как мнесделать простое граничащее сердце с FA5, чья твердая внутренняя часть может исчезать и исчезать при клике?

Ответы [ 2 ]

1 голос
/ 11 декабря 2019

Вместо укладки установите обводку на самом SVG и переключайте цвет заливки вместо непрозрачности. 

[...document.querySelectorAll('.like')].forEach(heart => {
    heart.addEventListener('click', () => {
        heart.classList.toggle('liked');
    });
});
.like {
    display: inline-block;
    cursor: pointer;
    user-select: none;
}
.like > .fill {
    color: transparent;
    transition: color 0.25s;
    stroke: black;
    /* The stroke width is huge because the svg itself is ~512x512, which is then scaled down */
    stroke-width: 50px;
}
.like.liked > .fill {
    color: red;
}
<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<div class="like fa-stack">
    <i class="fas fa-heart fa-stack-1x fill"></i>
</div>
1 голос
/ 11 декабря 2019

Итак, я разобрался с решением через 5 минут после публикации, несмотря на то, что тратил на него часы раньше. Разве так не всегда?

Решение состоит в том, чтобы просто добавить атрибут data-fa-transform к сердцу заполнения, чтобы уменьшить его на 1 пиксель, чтобы он поместился внутри границы:

data-fa-transform="shrink-1"

Да, вот и все.

...