Question

我正在尝试将RESET格式中的reset button文本替换为Font Awesome Icon (specifically: fa fa-refresh)。我该怎么办？

代码：

<div class="form-actions col-sm-12">
  <?php if ($showResetButton) { ?>
  <input type="reset" id="reset" class="button button-dark button-3d" value="Reset">
  <?php } ?>
  <input type="submit" class="button button-3d" value="Search" />
</div>

Answer 1

使用Unicode。您将在这里找到unicode for refresh icon。但是您需要使用字体家族的css属性。

#reset{
font-family: FontAwesome;
}

<link rel="stylesheet" href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

<div class="form-actions col-sm-12">
    <?php if ($showResetButton) { ?> <input type="reset" id="reset" class="button button-dark button-3d" value="Reset &#xf021;"> <?php } ?>
    <input type="submit" class="button button-3d" value="Search"/>
</div>

Answer 2

代替使用，可以使用

<button type="reset" value="Reset">
<i class="fa fa-refresh"></i>
Reset</button>

，然后在按钮内添加所需的标签。

Answer 3

这是您的代码：

    <div class="form-actions col-sm-12">
        <?php if ($showResetButton) { ?> 
         <button type="reset" id="reset" class="btn btn-warning">
        Search <i class='fa fa-refresh'></i>
        </button><?php } ?>
        <button type="submit" class="btn btn-success">
        Search <i class='fa fa-search'></i>
        </button>

    </div>`

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <div class="form-actions col-sm-12">
        <?php if ($showResetButton) { ?> 
         <button type="reset" id="reset" class="btn btn-warning">
        Reset <i class='fa fa-refresh'></i>
        </button><?php } ?>
        <button type="submit" class="btn btn-success">
        Search <i class='fa fa-search'></i>
        </button>
         
    </div>

如何在重置按钮中添加超棒的字体图标？

3 个答案: