Перейти к содержимому


Иконки


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 5

#1 sauron.089

sauron.089

    Пользователь

  • Пользователи
  • PipPip
  • 31 сообщений

Отправлено 02 Июль 2015 - 14:58

Как вставить иконки взамен имеющихся? В icon.css  нашел целый список иконок,но как их присобачить к сайту,не пойму -_- пытался вместо  <a class="sbtnf sbtnf-rounded color color-hover icon-youtube" href="#"></a>   (icon-yotube) прописать instagram,он появлялся,но не выделял значок инстаграмма,а цвет показывал. Помогите,пожалуйста.  
ВОТ,НАПРИМЕР,ДОБАВИЛ ИКОНКУ APPSTORE ПУТЕМ ПРОПИСИ В HTML СТРОКИ <a class="sbtnf sbtnf-rounded color color-hover icon-appstore" href="#"></a> , вот что получается :((
Аккаунт SL-332461

Прикрепленные изображения

  • VZk7vpc2ni8.jpg


#2 sauron.089

sauron.089

    Пользователь

  • Пользователи
  • PipPip
  • 31 сообщений

Отправлено 05 Июль 2015 - 13:00

ааааааааааааааауууууууууууууууууууууууууууууууууу,неужели это такой трудный вопрос?

#3 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 07 Июль 2015 - 04:21

Судя по всему, данная иконка отсутствует.

Как вариант, можно скачать обновленную версию шрифтовых иконок и подключить дополнительным файлом:
http://fortawesome.g...o/Font-Awesome/

#4 sauron.089

sauron.089

    Пользователь

  • Пользователи
  • PipPip
  • 31 сообщений

Отправлено 07 Июль 2015 - 09:53

Просмотр сообщенияVaccina (07 Июль 2015 - 04:21) писал:

Судя по всему, данная иконка отсутствует.

Как вариант, можно скачать обновленную версию шрифтовых иконок и подключить дополнительным файлом:
http://fortawesome.g...o/Font-Awesome/

Спасибо,что ответили! Но,не могли бы Вы помочь и с этим вопрос:)  Я скачал полностью архив с главной страницы. Какие файлы подключать? В .css только два файла и похожу не связанных с иконками,а с less я вообще не знаком :unsure:  Спасибо,жду ответа! До сих пор мучаюсь с иконками

#5 sauron.089

sauron.089

    Пользователь

  • Пользователи
  • PipPip
  • 31 сообщений

Отправлено 07 Июль 2015 - 11:33

Просмотр сообщенияVaccina (07 Июль 2015 - 04:21) писал:

Судя по всему, данная иконка отсутствует.

Как вариант, можно скачать обновленную версию шрифтовых иконок и подключить дополнительным файлом:
http://fortawesome.g...o/Font-Awesome/

Спасибо за ресурс! Разобрался и настроил! Как делать:

1.Скачиваем архив  "font-awesome.zip" (прикрепил)

2.Устанавливаем  font-awesome.min.CSS  (CАЙТ-ДОБАВИТЬ ФАЙЛЫ) и прописываем в  HTML
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
   между <head></head> .

3. Заходим на этот ресурс http://fortawesome.g...-Awesome/icons/ и в поисковой строке ищем желаемую иконку,например, VK.

4. Нажимаем на появившуюся иконку VK и видим код
 <i class="fa fa-vk fa-3x"></i>
, копируем и вставляем в HTML, я вставлял на место прошлых иконок в подвал сайта.

5. Опять ищем желаемые иконки и повторяем действия снова,вставляя код на строчку ниже предыдущего (вот так)

<i class="fa fa-vk fa-3x"></i> <!--ИКОНКА "ВК"-->
<i class="fa fa-instagram fa-3x "></i> <!--ИКОНКА "ИНСТАГРАММА"-->
<i class="fa fa-twitter fa-3x "></i> <!--ИКОНКА "ТВИТТЕРА"-->
6. Изменяем тег <i> на тег <a> ,было как в 5 пункте,а стало:

<a class="fa fa-vk fa-3x "></a>
<a class="fa fa-instagram fa-3x "></a>
<a class="fa fa-twitter fa-3x "></a>

7. Теперь можно добавлять ссылки на ваши социальные сети  
<a class="fa fa-twitter fa-3x" href="ссылка на ваш профиль в соц.сети"></a>

8. Изменять цвет иконок и цвет при наведение указателя можно добавив в main.css
a.akon {
color:#ваш цвет
transition: 320ms linear;
}
a.akon:hover {
color:#ваш цвет


a.akona {
transform: translateX(20px);
}

a.akonb {
transform: translateX(10px);
}
   Первый пункт "color" меняет статичный цвет,а второй меняет цвет и наведении мыши. Можно добавить плавный переход цвета параметром "transition: 320ms linear;", или убрать его,чтобы цвет менялся мгновенно.

9. Далее в HTML исправить


  
<a class="fa fa-vk fa-3x "></a>
<a class="fa fa-instagram fa-3x "></a>
<a class="fa fa-twitter fa-3x "></a>
   на
<a class="fa fa-vk fa-3x akon" href="Ссылка на ваш профиль в соц.сети"></a>
<a class="fa fa-instagram fa-3x akon akonb " href="Ссылка на ваш профиль в соц.сети"></a>
<a class="fa fa-twitter fa-3x akon akona" href="Ссылка на ваш профиль в соц.сети"></a> 

10. Размер иконок можно регулировать параметром
<a class="fa fa-vk fa-[color=#ff0000]3x[/color] "></a>

Меняя это значение на:
lg-маленькая
2x-больше





В итоге получаются вот такие иконки (см. скриншот) или на самом сайте, в подвале nerana.ru
Спасибо за внимание,надеюсь пригодится информация :)

Прикрепленные изображения

  • qXhjSXDWObg.jpg

Прикрепленные файлы


Сообщение отредактировал metry: 21 Июнь 2017 - 11:14


#6 konffeta

konffeta

    Новичок

  • Пользователи
  • Pip
  • 2 сообщений

Отправлено 10 Май 2020 - 13:31

Просмотр сообщенияsauron.089 (07 Июль 2015 - 11:33) писал:

Спасибо за ресурс! Разобрался и настроил! Как делать:

1.Скачиваем архив  "font-awesome.zip" (прикрепил)

2.Устанавливаем  font-awesome.min.CSS  (CАЙТ-ДОБАВИТЬ ФАЙЛЫ) и прописываем в  HTML
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
   между <head></head> .

3. Заходим на этот ресурс http://fortawesome.g...-Awesome/icons/ и в поисковой строке ищем желаемую иконку,например, VK.

4. Нажимаем на появившуюся иконку VK и видим код
 <i class="fa fa-vk fa-3x"></i>
, копируем и вставляем в HTML, я вставлял на место прошлых иконок в подвал сайта.

5. Опять ищем желаемые иконки и повторяем действия снова,вставляя код на строчку ниже предыдущего (вот так)

<i class="fa fa-vk fa-3x"></i> <!--ИКОНКА "ВК"-->
<i class="fa fa-instagram fa-3x "></i> <!--ИКОНКА "ИНСТАГРАММА"-->
<i class="fa fa-twitter fa-3x "></i> <!--ИКОНКА "ТВИТТЕРА"-->
6. Изменяем тег <i> на тег <a> ,было как в 5 пункте,а стало:

<a class="fa fa-vk fa-3x "></a>
<a class="fa fa-instagram fa-3x "></a>
<a class="fa fa-twitter fa-3x "></a>

7. Теперь можно добавлять ссылки на ваши социальные сети  
<a class="fa fa-twitter fa-3x" href="ссылка на ваш профиль в соц.сети"></a>

8. Изменять цвет иконок и цвет при наведение указателя можно добавив в main.css
a.akon {
color:#ваш цвет
transition: 320ms linear;
}
a.akon:hover {
color:#ваш цвет


a.akona {
transform: translateX(20px);
}

a.akonb {
transform: translateX(10px);
}
   Первый пункт "color" меняет статичный цвет,а второй меняет цвет и наведении мыши. Можно добавить плавный переход цвета параметром "transition: 320ms linear;", или убрать его,чтобы цвет менялся мгновенно.

9. Далее в HTML исправить


  
<a class="fa fa-vk fa-3x "></a>
<a class="fa fa-instagram fa-3x "></a>
<a class="fa fa-twitter fa-3x "></a>
   на
<a class="fa fa-vk fa-3x akon" href="Ссылка на ваш профиль в соц.сети"></a>
<a class="fa fa-instagram fa-3x akon akonb " href="Ссылка на ваш профиль в соц.сети"></a>
<a class="fa fa-twitter fa-3x akon akona" href="Ссылка на ваш профиль в соц.сети"></a> 

10. Размер иконок можно регулировать параметром
<a class="fa fa-vk fa-[color=#ff0000]3x[/color] "></a>

Меняя это значение на:
lg-маленькая
2x-больше





В итоге получаются вот такие иконки (см. скриншот) или на самом сайте, в подвале nerana.ru
Спасибо за внимание,надеюсь пригодится информация Изображение
увы но ваш мануал подключает иконки по внешней ссылке из интернета и выполнить из него нужно всего лишь второй пункт, а все остальные действия бесполезны




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных