如何顯示“真棒字體”圖標

Question

我在<span>標記內添加了“真棒字體”圖標，還在我的CSS頁面中添加了真棒字體樣式。 但是圖標顯示不正確。 我需要正確顯示圖標。

我在HTML中添加了很棒的字體為<span class="focus-input100" data-placeholder="&#61447";> </span>但它不起作用。

HTML標記：

<div class="wrap-input100 validate-input" data-validate = "Enter username">
    <input class="input100" type="text" name="username" placeholder="Username" >
    <span class="focus-input100" data-placeholder="&#61447";> </span>
</div>

CSS：

.focus-input100 {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.focus-input100::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;

  background: #fff;
}

.focus-input100::after {
  font-family: Material-Design-Iconic-Font;
  font-size: 22px;
  color: #fff;

  content: attr(data-placeholder);
  display: block;
  width: 100%;
  position: absolute;
  top: 6px;
  left: 0px;
  padding-left: 5px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.input100:focus {
  padding-left: 5px;
}

.input100:focus + .focus-input100::after {
  top: -22px;
  font-size: 18px;
}

.input100:focus + .focus-input100::before {
  width: 100%;
}

.has-val.input100 + .focus-input100::after {
  top: -22px;
  font-size: 18px;
}

.has-val.input100 + .focus-input100::before {
  width: 100%;
}

.has-val.input100 {
  padding-left: 5px;
}

使用我的代碼，圖標顯示為一個小矩形框，但我需要使用的圖標的正確圖像。

使用此鏈接查看我的問題： http : //enreachapp.com/login/login2.php

Answer 1

首先，在提供代碼中，您不使用Font Awesome而是在使用material icon 。

基於此，您必須更新您的font-family和content 。 將以下代碼替換為您的CSS，然后檢查您是否會看到圖標。

我為您添加了主頁圖標，其他人則需要根據您的要求添加它，具體取決於代碼。

 .focus-input100 { position: relative; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .focus-input100::before { content: ""; color: #000; display: block; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; background: #fff; } .focus-input100::after { font-family: Material-Design-Iconic-Font; font-size: 22px; color: #000; content: "\\f175"; display: block; width: 100%; position: absolute; top: 6px; left: 0px; padding-left: 5px; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .input100:focus { padding-left: 5px; } .input100:focus+.focus-input100::after { top: -22px; font-size: 18px; } .input100:focus+.focus-input100::before { width: 100%; } .has-val.input100+.focus-input100::after { top: -22px; font-size: 18px; } .has-val.input100+.focus-input100::before { width: 100%; } .has-val.input100 { padding-left: 5px; } .focus-input101 { position: relative; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .focus-input101::before { content: ""; color: #000; display: block; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; background: #fff; } .focus-input101::after { font-family: Material-Design-Iconic-Font; font-size: 22px; color: #000; content: "\\f18f"; display: block; width: 100%; position: absolute; top: 6px; left: 0px; padding-left: 5px; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .input101:focus { padding-left: 5px; } .input101:focus+.focus-input101::after { top: -22px; font-size: 18px; } .input101:focus+.focus-input101::before { width: 100%; } .has-val.input101+.focus-input101::after { top: -22px; font-size: 18px; } .has-val.input101+.focus-input101::before { width: 100%; } .has-val.input101 { padding-left: 5px; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"> <span class="login100-form-title pb-34 pt-27">Log in</span> <div class="wrap-input100 validate-input" data-validate="Enter username"><input class="input100" type="text" name="username" placeholder="Username"><span class="focus-input100" data-placeholder="&#61447;"></span></div> <div class="wrap-input101 validate-input" data-validate="Enter password"> <input class="input101" type="password" name="pass" placeholder="Password" id="password"><span class="focus-input101" data-placeholder="&#61475;"></span></div>