Блог

Главная - Вопросы по программированию - Есть ли способ редактировать края или границы значков fontawesome?

Есть ли способ редактировать края или границы значков fontawesome?

#html #css

#HTML #css

Вопрос:

В настоящее время я студент, изучающий HTML и CSS. Мне было поручено повторить одну веб-страницу. Однако у меня возникают трудности с тем, чтобы значки выглядели так, как показано в модели, предоставленной для репликации. На изображениях ниже показано, как должна выглядеть область значков модели по сравнению с тем, что у меня есть, а также как выглядели исходные значки, когда они были добавлены в HTML до внесения изменений в цвет или размер.

Исходная область значка предоставленной модели.

Насколько близко я к этому подошел

Исходные значки до внесения изменений в размер и цвет

Мне нужно, чтобы края были четкими, а белые области над и под значками были удалены. Я попытался установить радиус границы, поля и отступы на 0 пикселей или 0%, но ничего не работает. Я также пробовал использовать text-shadow.

Мой HTML-код для области значков

 '<div class="icons">
        <i class="fab fa-twitter-square"></i>
        <i class="fab fa-facebook-square"></i>
        <i class="fab fa-dribbble-square"></i>
        <i class="fab fa-tumblr-square"></i>
        <i class="fas fa-rss-square"></i>
    </div>'

И CSS

 'i{
display: inline-flexbox;
font-size: 24px;
color: #3E5A99;
background-color: #E5EEFF;
margin-bottom: 50px;
}'

Я прошу несколько советов о том, как это сделать, пожалуйста. Заранее благодарю.

Ответ №1:

Короткий ответ — нет, вы не можете редактировать значки FontAwesome webfont без загрузки, редактирования и повторной загрузки отдельных svg.

Я бы использовал версии этих значков без фона, а затем поместил их каждый в div . Затем вы можете установить div border-radius , background-color , и т.д. именно то, что вам нужно.

Пара указателей на этот процесс:

Используйте display: grid; для каждого контейнера div, таким образом, вы также можете добавить place-items: center; в суперцентр каждый значок внутри его div.

Комментарии:

1. Хорошо, спасибо за ваше предложение. Я обязательно попробую это и дам вам знать, если это сработает.

2. Независимо от того, что я делаю, значки по-прежнему отображают эту белую область вверху и внизу от них.

3. Вы пытались изменить значки на их стандартную форму? (например fa-twitter , вместо fa-twitter-square )?

4. Большое вам спасибо @Calvin. Я сделал то, что вы предложили, и, добавив немного отступов вокруг элемента, я смог успешно воспроизвести значки.

Метки: