Иконка lock/замок awesome

Иконка awesome lock/замок, не буду делать отдельно на иконку unlock + "ключ от замка". Иконка замок, может использоваться в том месте, где есть строка пароля.

Иконка awesome lock/замок

1. Иконка lock/закрытый замок.
2. Иконка unlock/ открытый замок.
3. Иконка unlock/открытый замок.
4. Иконка key/ключ от замка.

Иконка lock/закрытый замок.

В первом пункте скажу, что существует такой замечательный шрифт, который называется "конечным" - там есть практически все киноки, которые вам потребуются на сайте. FONT_AWESOME? как подключить


Стандартная иконка lock/закрытый замок:

<i class="fa fa-lock" aria-hidden="true"></i>

Вывод иконки lock/замок awesome по умолчанию:

Добавим класс - red_30, увеличим и покрасим:

<style>

.red_30 { color: red;

font-size: 30px;

}

</style>

Далее увеличиваем размер и меняем цвет...




Иконка unlock/ открытый замок.

Иконка unlock/ открытый замок по умолчанию.

<i class="fa fa-unlock-alt" aria-hidden="true"></i>
Результат:

Меняем цвет, размер иконки unlock/ открытый замок.

Меняем цвет, размер иконки unlock/ открытый замок.

Меняем цвет, размер иконки unlock/ открытый замок.




Иконка unlock/ открытый замок с заполнением.

Иконка unlock/ открытый замок с заполнением по умолчанию.

<i class="fa fa-unlock" aria-hidden="true"></i>
Результат:

Меняем цвет, размер иконки unlock/открытый замок.

Меняем цвет, размер иконки unlock/открытый замок.

Меняем цвет, размер иконки unlock/открытый замок.




Иконка key/ключ от замка.

Иконка key/ключ от замка по умолчанию.

<i class="fa fa-key" aria-hidden="true"></i>
Результат:

Меняем цвет, размер иконки key/ключ от замка.

Меняем цвет, размер иконки key/ключ от замка.

Меняем цвет, размер иконки key/ключ от замка.