Страница 1 из 11
Форум про uCoz » Всё для web-мастера » Web мастеру » Стильные иконки и кнопки CSS на сайт
Стильные иконки и кнопки CSS на сайт
Kosten
Дата: Понедельник, 22.02.2016, 16:11 | Сообщение # 1
Администраторы
Сообщений:13502
Награды: 47


Сейчас можно просто прописать стиль и не нужно искать иконку под нужную тему. Так как все можно сделать очень быстро и будет смотреться красиво. Просто нам с начало нужно выставить скрипт вверх сайта, в котором и будет находиться большая подборка.

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



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

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



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

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

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.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(7Kb) · 4525035.png(25Kb) · 5718695.png(162Kb)
Kosten
Дата: Понедельник, 22.02.2016, 16:13 | Сообщение # 2
Администраторы
Сообщений:13502
Награды: 47


Также есть стили, чтоб можно увеличивать, но пока этого не делал, кто может пропишите.
Сопрано
Дата: Понедельник, 22.02.2016, 16:54 | Сообщение # 3
Пользователи
Сообщений:350
Награды: 2


Так в интернете по блогам посмотрел и нашел вообще цветные, но скачать невозможно стили, написал, но думаю не ответят, как давно не кто не описывал, но комментарий были хорошие, а здесь только черно белые.
Kosten
Дата: Понедельник, 22.02.2016, 17:05 | Сообщение # 4
Администраторы
Сообщений:13502
Награды: 47


Цитата Trantel ()
а здесь только черно белые.

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



Вот, не думаю, что тут одна гамма, вижу 3 оттенка.
Прикрепления: 7444618.jpg(41Kb)
Scheme
Дата: Понедельник, 22.02.2016, 17:27 | Сообщение # 5
Пользователи
Сообщений:106
Награды: 1


Так то стили они же почти все одинаковы, и если есть другие кнопки или иконки цветные, что в первые слышу, то и на эту систему подойдут.
Maryges
Дата: Понедельник, 22.02.2016, 17:31 | Сообщение # 6
Пользователи
Сообщений:116
Награды: 0


Цитата Kosten ()
Также есть стили, чтоб можно увеличивать, но пока этого не делал, кто может пропишите.

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


И font-size: 7px; в класс добавить нужно и должно увеличиться.
Tergran
Дата: Понедельник, 22.02.2016, 17:56 | Сообщение # 7
Пользователи
Сообщений:93
Награды: 0


Здесь делаем так, если вам нужно увеличить иконку.

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

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


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

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


Сами выставляем размер.
Kosten
Дата: Понедельник, 22.02.2016, 18:05 | Сообщение # 8
Администраторы
Сообщений:13502
Награды: 47


Вот как, а то ставил без style и не каких изменений, проверил, увеличил на 15 пикселей, кроме последней конки, это дата и видно сразу преобразился вид материала.

csretven
Дата: Понедельник, 22.02.2016, 18:17 | Сообщение # 9
Пользователи
Сообщений:53
Награды: 0


Kosten, так вообще здорово, что стили, чейчас могут делать и украсить сайт многие и как под размер выставить.
Kosten
Дата: Понедельник, 22.02.2016, 18:34 | Сообщение # 10
Администраторы
Сообщений:13502
Награды: 47


Да, возможно от ссылок отойдут, так как можно много чего выбрать и на любую тему.
Траст
Дата: Вторник, 01.03.2016, 02:08 | Сообщение # 11
Пользователи
Сообщений:98
Награды: 0


Чтоб брать кнопки и иконки, а также скрипт, который ставят вверх сайта, в котором классы, берем с с этого сайта, так как все обновляется.

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


Быстро, дешево и сердито!
ucozmental
Дата: Суббота, 14.05.2016, 01:33 | Сообщение # 12
Пользователи
Сообщений:92
Награды: 0


Тему эту давно искал, знал что веб мастере, а она прямо на глазах была, просто перекреплена и теперь еще здесь по этому фактору создали в этой тематике..
siteschool4
Дата: Понедельник, 13.06.2016, 16:47 | Сообщение # 13
Пользователи
Сообщений:5
Награды: 0


хз
Kosten
Дата: Понедельник, 13.06.2016, 18:02 | Сообщение # 14
Администраторы
Сообщений:13502
Награды: 47


siteschool4, нужно с начало попробовать, но а потом оценить, а то ХЗ не понятная субстанция. biggrin
tsakonter
Дата: Понедельник, 13.06.2016, 19:13 | Сообщение # 15
Пользователи
Сообщений:186
Награды: 0


Kosten, кнопки нормальные, что нужно подобрал, но слабый интернет, когда открываешь страницу, то они позднее появляются, хоть на миг небольшой.
Форум про uCoz » Всё для web-мастера » Web мастеру » Стильные иконки и кнопки CSS на сайт
Страница 1 из 11
Поиск: