Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Как использовать FontAwesome в CSS ?

Как использовать FontAwesome в CSS ?


     01.05.2016    Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)    7384

вопрос
Всегда использую в коде.
Но тут возникла загвоздка.

Имеется код поискового поля:

<input type="submit" class="ser-button" alt="Найти" title="Найти" value="">


К нему сделал CSS:


.ser-button {
    position: relative;
    right: 3px;
    top: 3px;
    z-index: 105;
    cursor: pointer;
    border: none;
    width: 20px;
    height: 16px;
    background: url('../images/search-button.png') no-repeat;
}


В итоге:
Как использовать FontAwesome в CSS ?



Хочу сменить кнопку поиска, но не использовать иконку-картинку (search-button.png), а с помощью FontAwesome иконки.

В рунете везде описано что в стилях нужно указывать unicode.

Выбрал иконку: http://fontawesome.io/icon/search/, указан Unicode: f002

По инструкции указываю в стиле:
content: "\f002";
- а толку ноль, нету иконки !!!!

Инструкцию брал ЗДЕСЬ

Как решить эту проблему ?

Ответа пока нет


9 комментариев

LazyDev
PHP-developer

LazyDev - 1 мая 2016 20:47 -

.ser-button:brefore {
    content: "\f002";
}
или
.ser-button:after {
    content: "\f002";
}
В зависимости где выводить нужно.
И
class="ser-button"
заменить на
class="fa ser-button"

Мой блог: LazyDev.pro

Помогаю с решением проблем на платной основе.

ARTYOM
Юзер

ARTYOM - 1 мая 2016 20:50 -

И с этим тоже парился, не могу решить косяк !

ARTYOM
Юзер

ARTYOM - 1 мая 2016 20:59 -

Вот - толку ноль ((((

stopani
Юзер

stopani - 1 мая 2016 21:11 -

font-family: FontAwesome; НЕ ЗАБЫЛ ДОБАВИТЬ?

ARTYOM
Юзер

ARTYOM - 1 мая 2016 21:12 -

добавил, толку нет.

stopani
Юзер

stopani - 1 мая 2016 21:33 -

Тогда напиши не input, а button.
<button value="" title="Найти" alt="Найти" class="fa ser-button" type="submit"></button>

ARTYOM
Юзер

ARTYOM - 1 мая 2016 22:46 -

Норм вопрос решен !

stopani
Юзер

stopani - 2 мая 2016 11:38 -

Замени стили, поинтересней выглядит.

.ser-button {
    background-color: white;
    border: medium none;
    border-radius: 0 50px 50px 0;
    cursor: pointer;
    font-size: 15px !important;
    height: 30px;
    position: relative;
    right: 0;
    top: 0;
    width: 27px;
    z-index: 105;
    transition: all 0.1s ease-in-out 0s;
    float: right;
    color: #ccc;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15) inset;
}
.ser-button:hover {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
    color: #999;
    height: 32px;
    top: -1px;
}

ARTYOM
Юзер

ARTYOM - 2 мая 2016 16:15 -

круто получилось. Спасибо.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх