Статьи

Очаровательные иконки социальных сетей с Font Awesome и CSS3

Сентябрь 22, 2018

В этой записи блога я покажу вам, как легко создавать и стилизовать значки социальных сетей (Facebook, Twitter, Google Plus и т. Д.) Для вашего сайта с помощью значков шрифтов Font Awesome .

Font Awesome предоставляет набор значков в виде шрифта TrueType, что означает, что вы можете отображать значки и манипулировать ими так же, как и текст с помощью CSS. Каждая буква соответствует одному значку — подумайте шрифты Microsoft Windows Wingdings. Набор значков большой, а тема веб-, поэтому вы найдете значок для всех потребностей вашего сайта .

Font Awesome хорошо сочетается с популярной библиотекой Twitter Bootstrap CSS & JS, так как в ней есть совместимая разметка HTML5 и соглашения об именах значков, хотя ее также можно использовать отдельно.

Снимок экрана 2013-04-22 в 9.53.26 вечера

Обновление: я слышал, что может быть проблема с Microsoft Windows и Google Chrome для отображения этих значков . Я вижу, есть ли обходной путь для этого и что вызывает условие. Font Awesome имеет субпиксельную подсказку и должен быть идеальным с разрешением 14 пикселей . Я опубликую больше информации, когда у меня будет время, чтобы дополнительно взглянуть на эту проблему.

1. Зачем его использовать?

Подход, представленный здесь, просто превосходит любой другой подход.

Плюсы:

  • Цвета могут быть скорректированы с помощью CSS3, с градиентами и всем этим
  • Масштабируемая графика
  • Совместимость с высоким разрешением («сетчатка»)
  • Простая HTML-разметка: просто <i class = ”icon icon-foo”> </ i> . Не требуется предварительной обработки CSS-спрайтов или других усложнений рабочего процесса.
  • Может быть анимирован с переходами CSS3
  • Простое сопоставление цвета текста ссылки для монотонных значков
  • FontAwesome можно обслуживать из CDN — не нужно удалять файлы на вашем хостинге, так как сеть доставки контента bootstrapcdn.com размещает файлы для вас
  • Работает с устаревшими браузерами (IE7 +)

Минусы:

  • Эти значки могут не полностью соответствовать рекомендациям бренда по услуге. Но эти рекомендации в основном ориентируют, не стесняйтесь их игнорировать, как это делают другие 100 000+ сайтов.
  • Художники толкают пиксель грустно
  • Не работает вне контекста браузера: электронная почта, RSS.

2. Пример

Ниже вы видите живой пример <iframe> . Пример пытается быть простым: вы могли бы также сделать иконки лучше, например, с помощью тонкой настройки стиля границ и использования градиентов вместо однотонного фона.

Смотрите исходный код на Github .

Исходный код: HTML (для последней версии, пожалуйста, смотрите Github)

  <!doctype html>
  <html>

    <head>

        <!-- Load Bootstrap and FontAwesome CDN'ed from bootstrapcdn.com -->
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />

        <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" />

        <link href="style.css" rel="stylesheet" />

    </head>
    <body>

        <div class= "container">

            <h1><i></i>FontAwesome and CSS social icons example<i></i></h1>

            <p>Social media icons created FontAwesome and styled with CSS3. Example is 100% image free, scalable and high DPI compatible.</p>

            <div id="social-bar">
                <a href="https://www.facebook.com/pages/Open-Source-Hacker/181710458567630">
                    <i></i>
                    <span>Facebook</span>
                </a>
                <a href="https://twitter.com/moo9000">
                    <i></i>
                    <span>Twitter</span>
                </a>
                <a href="https://plus.google.com/103323677227728078543/">
                    <i></i>
                    <span>Google Plus</span>
                </a>
                <a href="http://opensourcehacker.com/">
                    <i></i>
                    <span>Blog</span>
                </a>
            </div>

        </div>

        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

    </body>
</html>

Исходный код: CSS (для последней версии смотрите GitHub)

.container {
    width: 620px;
}

h1 {
    font-size: 25px;
}

h1 .icon:first-child {
    margin-right: 0.5em;
}

h1 .icon:last-child {
    margin-left: 0.5em;
}

/* Create square icons, white logo on colored background */

#social-bar .icon {
    color: white;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.5);
    min-width: 27px;
    line-height: 27px;
    text-align: center;
}

#social-bar a {
    margin-right: 5px;
    padding: 5px; /* Increase hit rectangle for touch devices */
}

#social-bar a:first-child {
    padding-left: 0;
}

/* Set icon color related to the service */

#social-bar a span {
    margin-left: 5px;
}

#social-bar .icon-rss {
    background: #e5842f;
}

#social-bar .icon-facebook {
    background: #3B5998;
}

#social-bar .icon-twitter {
    background: #00ACED;
}

#social-bar .icon-google-plus {
    background: #E14107;
}

/* Don't underline icon etc. */
#social-bar a:hover {
    text-decoration: none;
}

#social-bar a:hover span {
    text-decoration: underline;
    color: #333333; /* Match icon highlight color */
}

/* Animate mouse hover */
#social-bar a .icon {
   transition: background 0.5s;
}

#social-bar a:hover .icon {
    background: #333333;
    transition: background 0.5s;
}

42
Share: