Значится так! Расскажу как это делал я :))
Пример со шрифтами загруженными в проект (не подключенными по ссылке)
если загрузить страничку с этим кодом... вместо иконок будут квадратики (НО!!!!!!! внутри строки запроса), если подключить стили... иконки появятся!
Написано только что
<!DOCTYPE html>
<html>
<head>
<!--====== 1- файл стилей шрифта awesome ==========
========== 2- наши рабочие стили ==================-->
<link rel="stylesheet" href="stylefont.css">
<link rel="stylesheet" href="style.css">
<style>
.header__form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.header__form span {
padding: 0px 5px 0px 5px;
}
.header__form input {
padding-left: 43px;
font-family: OpenSans;
font-size: 13px;
line-height: 1.2;
color: #a9a9a9;
width: 281px;
height: 46px;
background-color: #ffffff;
border-radius: 3px;
}
.header__form button {
width: 211px;
height: 46px;
background-color: #ffbb42;
border-radius: 3px;
}
.header__form a {
font-family: OpenSans;
font-size: 14px;
font-weight: 400;
line-height: 1.2;
text-transform: uppercase;
color: #ffffff;
}
.icon-user:before {
content: "\e902";
font-family: icons !important;
position: absolute;
padding: 15px 0px 0px 15px;
color: gray;
}
.icon-mail:before {
content: "\e900";
font-family: icons !important;
position: absolute;
padding: 15px 0px 0px 15px;
color: gray;
}
.icon-phone:before {
content: "\e901";
font-family: icons !important;
position: absolute;
padding: 15px 0px 0px 15px;
color: gray;
}
</style>
</head>
<body>
<!--================= <input> обворачиваем, к примеру, в <span> с классом иконки,
===================== который будет указан в файле стилей шрифта .css -->
<form action="#" method="get" class="header__form">
<span class="icon-user"><input placeholder="Full Name" type="text" name="username" value="User"></span>
<span class="icon-mail"><input placeholder="Email Address" type="text" name="username" value="User"></span>
<span class="icon-phone"><input placeholder="Phone Number" type="tel" name="username" value="User"></span>
<span><button><a href="#">Request a quote</a></button></span>
</form>
</body>
</html>
Простой
Средний