Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.54/13: Рейтинг темы: голосов - 13, средняя оценка - 4.54
0 / 0 / 0
Регистрация: 14.05.2019
Сообщений: 1

Иконки Font Awesome - как задать цвет каждой иконки по отдельности?

14.05.2019, 21:01. Показов 2824. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый вечер/день/утро!
Прошу помочь разобраться...
Нашел на просторах код кнопок для блока соц. сетей, в CSS задано оформление блока в общем, но мне нужно оформить каждую соц. сеть в разных цветах... Не понимаю, как задать стили для "fa-vk" и т.д. в данном случае.

HTML5
1
2
3
4
5
6
<ul class="social-icons-1">
    <li><a href="#"><i class="fa fa-vk"></i></a></li>
    <li><a href="#"><i class="fa fa-odnoklassniki"></i></a></li>
    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.social-icons-1 {
    padding: 0;
    list-style: none;
    margin: 10px;
}
.social-icons-1 li {
    display: inline-block;
    position: relative;
    font-size: 24px;
}
.social-icons-1 i,
.social-icons-1 img {
    color: #fff;
    position: absolute;
    top: 18px;
    left: 18px;
    width: 24px;
    height: 24px;
    text-align:center;
    transition: all 0.3s ease-out;
}
.social-icons-1 a {
    display: inline-block;
}
.social-icons-1 a:before {
    transform: scale(1);
    content: "";
    width: 60px;
    height: 60px;
    border-radius: 100%;
    display: block;
    background: linear-gradient(45deg, #337AB7, #2d6b9f);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.3s ease-out;
}
.social-icons-1 a:hover:before {
    transform: scale(0);
    transition: all 0.3s ease-in;
}
.social-icons-1 a:hover i,
.social-icons-1 a:hover img {
    transform: scale(1.8);
    color: #337AB7;
    transition: all 0.3s ease-in;
}
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
14.05.2019, 21:01
Ответы с готовыми решениями:

Font awesome или как сделать иконки соц сетей без дива
Возник такой вопрос долго мучился позиционированием шрифта внутри дивов и тут я решил попробовать подойти иначе вписал иконки задал фоновый...

Вращение с паузой иконки Font Awesome (v.4)
Здравствуйте! Возникла навязчивая идея делать вращение иконки с паузой, например, есть меню с иконками: иконка иконка иконка ...

Смена цвета иконки при наведении, Font Awesome
В общем такая ситуация. Использую иконки font awesome и для них применяется анимация :hover с заменой цвета, но вся проблема в том, что эта...

2
20 / 13 / 9
Регистрация: 13.03.2018
Сообщений: 63
15.05.2019, 08:38
Попробуй воспользоваться :nth-child(n), где n номер нужной тебе иконки.
0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
17.05.2019, 00:08
13я строка наверно перебивает по приоритетам самый простой способ, который можно заюзать для изменения цвета иконок.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
17.05.2019, 00:08
Помогаю со студенческими работами здесь

Как в поисковую форму вставить Font Awesome?
Здравствуйте, вопрос такой: есть кнопка в форме поиска по сайту. Нужно в нее поставить иконку Font Awesome вместо картинки. ...

Не подключается font-awesome
Я конечно не претендую на звание программист года, но я ни как не могу понять почему оно не видит папки с шрифтами (fonts)? Это все файлы...

Font awesome отображается некорректно
Подскажите пожалуйста, почему иконки отображаются некорректно, а именно на 1-м рисунке видно, как некоторые кружочки на одной линии толще,...

Квадратики вместо font-awesome
Почему вместо символов подключенного шрифта font-awesome отображаются только пустые квадратики? Шрифт точно подключен правильно, так как...

Ошибка при загрузке шрифта Font Awesome
Здравствуйте, форумчане! Вот такие ошибки возникают, раньше ни разу такого не было, как исправить? Failed to decode downloaded...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru