|
Стильные иконки и кнопки CSS на сайт
|
|
Kosten |
Понедельник, 22 Февраля 2016, 16:11 | Сообщение 1 |
|
Сейчас можно просто прописать стиль и не нужно искать иконку под нужную тему. Так как все можно сделать очень быстро и будет смотреться красиво. Просто нам с начало нужно выставить скрипт вверх сайта, в котором и будет находиться большая подборка.
Вот пример, можно подумать, что они нарисованы, но нет она сделаны как описываю, каждая под своим классом.
Главное, когда вы их ставите, они автоматически находят размер, если вы хотите установить на вид материалов или много куда, перед описанием, то под ширину и высоту само подойдут.
Здесь регистрация написано шрифтом намного шири и кнопка стала под него.
Переходим к установке:
Копируем этот скрипт и ставим вверх сайта и заключаем в 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 все поддерживается.
|
| [ RU ] |
|
|
Kosten |
Понедельник, 22 Февраля 2016, 16:13 | Сообщение 2 |
|
|
Также есть стили, чтоб можно увеличивать, но пока этого не делал, кто может пропишите.
|
| [ RU ] |
|
|
Сопрано |
Понедельник, 22 Февраля 2016, 16:54 | Сообщение 3 |
|
Так в интернете по блогам посмотрел и нашел вообще цветные, но скачать невозможно стили, написал, но думаю не ответят, как давно не кто не описывал, но комментарий были хорошие, а здесь только черно белые.
|
| [ RU ] |
|
|
Kosten |
Понедельник, 22 Февраля 2016, 17:05 | Сообщение 4 |
|
|
Цитата Trantel (  ) а здесь только черно белые.
Это совершенно не верное понятие, что только в одной гамме. Все зависит от того как настроишь, можно сделать хтнт, также если сообщение придет, будет другой оттенок кнопки и при наведение меняется, это можно посмотреть на форуме.
Вот, не думаю, что тут одна гамма, вижу 3 оттенка.
|
| [ RU ] |
|
|
Scheme |
Понедельник, 22 Февраля 2016, 17:27 | Сообщение 5 |
|
Так то стили они же почти все одинаковы, и если есть другие кнопки или иконки цветные, что в первые слышу, то и на эту систему подойдут.
|
| [ RU ] |
|
|
Maryges |
Понедельник, 22 Февраля 2016, 17:31 | Сообщение 6 |
|
Цитата Kosten ( ) Также есть стили, чтоб можно увеличивать, но пока этого не делал, кто может пропишите.
Увеличение точно не в стилях должно быть а в самом коде.
Код <i class="fa fa-eye"></i>
И font-size: 7px; в класс добавить нужно и должно увеличиться.
|
| [ RU ] |
|
|
Tergran |
Понедельник, 22 Февраля 2016, 17:56 | Сообщение 7 |
|
Здесь делаем так, если вам нужно увеличить иконку.
Вот идет стандартно как ставим:
Код <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 |
|
|
Вот как, а то ставил без style и не каких изменений, проверил, увеличил на 15 пикселей, кроме последней конки, это дата и видно сразу преобразился вид материала.
|
| [ RU ] |
|
|
csretven |
Понедельник, 22 Февраля 2016, 18:17 | Сообщение 9 |
|
Kosten, так вообще здорово, что стили, чейчас могут делать и украсить сайт многие и как под размер выставить.
|
| [ RU ] |
|
|
Kosten |
Понедельник, 22 Февраля 2016, 18:34 | Сообщение 10 |
|
|
Да, возможно от ссылок отойдут, так как можно много чего выбрать и на любую тему.
|
| [ RU ] |
|
|
Траст |
Вторник, 01 Марта 2016, 02:08 | Сообщение 11 |
|
Чтоб брать кнопки и иконки, а также скрипт, который ставят вверх сайта, в котором классы, берем с с этого сайта, так как все обновляется.
Быстро, дешево и сердито!
|
| [ RU ] |
|
|
ucozmental |
Суббота, 14 Мая 2016, 01:33 | Сообщение 12 |
|
Тему эту давно искал, знал что веб мастере, а она прямо на глазах была, просто перекреплена и теперь еще здесь по этому фактору создали в этой тематике..
|
| [ RU ] |
|
|
siteschool4 |
Понедельник, 13 Июня 2016, 16:47 | Сообщение 13 |
|
хз
|
| [ UA ] |
|
|
Kosten |
Понедельник, 13 Июня 2016, 18:02 | Сообщение 14 |
|
|
siteschool4, нужно с начало попробовать, но а потом оценить, а то ХЗ не понятная субстанция. 
|
| [ RU ] |
|
|
tsakonter |
Понедельник, 13 Июня 2016, 19:13 | Сообщение 15 |
|
Kosten, кнопки нормальные, что нужно подобрал, но слабый интернет, когда открываешь страницу, то они позднее появляются, хоть на миг небольшой.
|
| [ RU ] |
|
|
