bootstrap glyphicon不会显示在按钮上

Question

我是bootstrap的新手。我想添加一些按钮。

我在网上搜索带图标的自举按钮，以下是我使用的示例：

<button type="submit" class="btn btn-danger btn-block btn-sm" name="delete_row" onClick="return confirm('Are You Sure ?!!')">
      Delete
    </button>

结果是一个没有图标的红色删除按钮。

我搜索了它，他们说，我应该使用glyphicon，所以我将这行代码添加到按钮：

<span class="glyphicon glyphicon-remove-sign"></span>

这个小广场应该像垃圾桶或其他东西，但它没有正确显示。

我也试过了，但结果仍然相同：

<span class="glyphicon glyphicon-trash"></span>Delete

这是我使用的库：

<link rel="stylesheet" href="assets/css/font.css">
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">

Answer 1

将您的fonts文件夹设置在与引导程序所在的css文件夹相同的级别，并将glyphicon字体放在那里。然后在bootstrap css文件中找到以下行，并确保它们也指向字体文件夹。

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
  url('../fonts/glyphicons-halflings-regular.woff') format('woff'), 
  url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
  url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Answer 2

参见示例：fiddle

HTML

<button type="button" class="btn btn-danger">
 Delete<span class="glyphicon glyphicon-remove-sign"></span>
</button>