• Страница 1 из 1
  • 1
Стильные иконки и кнопки CSS на сайт
Kosten
Понедельник, 22 Февраля 2016, 16:11 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Сейчас можно просто прописать стиль и не нужно искать иконку под нужную тему. Так как все можно сделать очень быстро и будет смотреться красиво. Просто нам с начало нужно выставить скрипт вверх сайта, в котором и будет находиться большая подборка.

Вот пример, можно подумать, что они нарисованы, но нет она сделаны как описываю, каждая под своим классом.



Главное, когда вы их ставите, они автоматически находят размер, если вы хотите установить на вид материалов или много куда, перед описанием, то под ширину и высоту само подойдут.

Здесь регистрация написано шрифтом намного шири и кнопка стала под него.



Переходим к установке:

Копируем этот скрипт и ставим вверх сайта и заключаем в hеаd Здесь стиль /hеаd

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


Вот все, больше не чего не нужно.

После всего нам нужен только такой код:

Код
<i class="fa fa-eye"></i>


В нем мы видим стоит класс какой то кнопки, что можете взять на этом сайте, предоставлено много. Просто находим то что вам нужно и с кода убираем fa fa-eye и ставим свой класс и он выводиться, основном это под категорий или перед названием ставят.

Вот взял убрал простые стрелки и поставил классы и совершенно по другому смотрится.



В результате, стили задаются автоматически. Величина иконок также регулируются добавлением классов, авторы шрифта добавили 4 класса предназначенные для увеличения иконок: fa-2x, fa-3x, fa-4x,fa-5x. Увеличение шрифтов происходит интервалами в x2, x3, x4, x5. Код иконки соответственно изменяется так:

Код
<i class="fa fa-folder-open fa-2x">


Помимо этого есть также второй способ вывода шрифтов иконок, она осуществляется посредством таких псевдоэлементов как: :after и :before.

Например, у нас есть блок test, чтобы рядом с ним вывести иконку, пропишем следующие стили:

Код
.test:after{
       padding-right: 7px;
       content: "\f005";
       font-style: normal;
       font-weight: normal;
       text-decoration: inherit;
       font-family: FontAwesome;
       font-size:40px;}


Иконка выводится с помощью unicode в третьей строке. Уникальный код шрифта можно взять на официальном сайте, которые размещены под выбранными иконками.

Как поняли не чего сложного нет и на системе uCoz все поддерживается.
Прикрепления: 4901723.png (6.7 Kb) · 4525035.png (25.0 Kb) · 5718695.png (161.8 Kb)
Страна: (RU)
Kosten
Понедельник, 22 Февраля 2016, 16:13 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Также есть стили, чтоб можно увеличивать, но пока этого не делал, кто может пропишите.
Страна: (RU)
Сопрано
Понедельник, 22 Февраля 2016, 16:54 | Сообщение 3
Оффлайн
Vip
Сообщений:461
Награды: 4
Так в интернете по блогам посмотрел и нашел вообще цветные, но скачать невозможно стили, написал, но думаю не ответят, как давно не кто не описывал, но комментарий были хорошие, а здесь только черно белые.
Страна: (RU)
Kosten
Понедельник, 22 Февраля 2016, 17:05 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Цитата Trantel ()
а здесь только черно белые.

Это совершенно не верное понятие, что только в одной гамме. Все зависит от того как настроишь, можно сделать хтнт, также если сообщение придет, будет другой оттенок кнопки и при наведение меняется, это можно посмотреть на форуме.



Вот, не думаю, что тут одна гамма, вижу 3 оттенка.
Прикрепления: 7444618.jpg (40.9 Kb)
Страна: (RU)
Scheme
Понедельник, 22 Февраля 2016, 17:27 | Сообщение 5
Оффлайн
Пользователи
Сообщений:157
Награды: 1
Так то стили они же почти все одинаковы, и если есть другие кнопки или иконки цветные, что в первые слышу, то и на эту систему подойдут.
Страна: (RU)
Maryges
Понедельник, 22 Февраля 2016, 17:31 | Сообщение 6
Оффлайн
Пользователи
Сообщений:142
Награды: 0
Цитата Kosten ()
Также есть стили, чтоб можно увеличивать, но пока этого не делал, кто может пропишите.

Увеличение точно не в стилях должно быть а в самом коде.
Код
<i class="fa fa-eye"></i>


И font-size: 7px; в класс добавить нужно и должно увеличиться.
Страна: (RU)
Tergran
Понедельник, 22 Февраля 2016, 17:56 | Сообщение 7
Оффлайн
Пользователи
Сообщений:101
Награды: 0
Здесь делаем так, если вам нужно увеличить иконку.

Вот идет стандартно как ставим:

Код
<i class="fa fa-check-square"></i>


Вот уже с увеличением одной иконки:

Код
<i class="fa fa-check-square" style="font-size:19px;"></i>


Сами выставляем размер.
Страна: (RU)
Kosten
Понедельник, 22 Февраля 2016, 18:05 | Сообщение 8
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Вот как, а то ставил без style и не каких изменений, проверил, увеличил на 15 пикселей, кроме последней конки, это дата и видно сразу преобразился вид материала.

Страна: (RU)
csretven
Понедельник, 22 Февраля 2016, 18:17 | Сообщение 9
Оффлайн
Пользователи
Сообщений:54
Награды: 0
Kosten, так вообще здорово, что стили, чейчас могут делать и украсить сайт многие и как под размер выставить.
Страна: (RU)
Kosten
Понедельник, 22 Февраля 2016, 18:34 | Сообщение 10
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Да, возможно от ссылок отойдут, так как можно много чего выбрать и на любую тему.
Страна: (RU)
Траст
Вторник, 01 Марта 2016, 02:08 | Сообщение 11
Оффлайн
Пользователи
Сообщений:101
Награды: 0
Чтоб брать кнопки и иконки, а также скрипт, который ставят вверх сайта, в котором классы, берем с с этого сайта, так как все обновляется.

Прикрепления: 1281080.png (190.0 Kb)


Быстро, дешево и сердито!
Страна: (RU)
ucozmental
Суббота, 14 Мая 2016, 01:33 | Сообщение 12
Оффлайн
Пользователи
Сообщений:112
Награды: 0
Тему эту давно искал, знал что веб мастере, а она прямо на глазах была, просто перекреплена и теперь еще здесь по этому фактору создали в этой тематике..
Страна: (RU)
siteschool4
Понедельник, 13 Июня 2016, 16:47 | Сообщение 13
Оффлайн
Пользователи
Сообщений:5
Награды: 0
хз
Страна: (UA)
Kosten
Понедельник, 13 Июня 2016, 18:02 | Сообщение 14
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
siteschool4, нужно с начало попробовать, но а потом оценить, а то ХЗ не понятная субстанция. biggrin
Страна: (RU)
tsakonter
Понедельник, 13 Июня 2016, 19:13 | Сообщение 15
Оффлайн
Пользователи
Сообщений:220
Награды: 0
Kosten, кнопки нормальные, что нужно подобрал, но слабый интернет, когда открываешь страницу, то они позднее появляются, хоть на миг небольшой.
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: