@font-face {
  font-family: "icon";
  src: url("./icon.eot");
  src: url("./icon.eot?#iefix") format("embedded-opentype"),
       url("./icon.woff2") format("woff2"),
       url("./icon.woff") format("woff"),
       url("./icon.ttf") format("truetype"),
       url("./icon.svg#icon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "icon";
    src: url("./icon.svg#icon") format("svg");
  }
}

[class^="icon-"]:before, [class*=" icon-"]:before,
[class^="icon-"]:after, [class*=" icon-"]:after {   
    font-family: icon, serif;
    font-style: normal;
}

.icon-lock:before { content: "\f100"; }
.icon-at:before { content: "\f101"; }
.icon-user:before { content: "\f102"; }