新的Bootstrap图标是否有字体？

如何解决新的Bootstrap图标是否有字体？

来自Font Awesome，我想在我的Web项目中使用new Bootstrap Icons。不幸的是，就我必须插入的代码量而言，包含Bootstrap Icons似乎更加乏味。

我在寻找什么

以图标bi-chevron-right为例。有什么方法可以将Bootstrap图标用作字体？伪代码：

<i class="bi bi-chevron-right"></i>

这样可以带来很多好处：

• 简单干净地包含图标。
• 由于项目的所有图标仅包含1个外部文件，因此加载时间更短。
• 在更改实际图标库的位置（考虑选项b）时，要灵活得多，您必须更新所有引用！）。
• 无需对实际图标大小进行硬编码，因为它可以由普通CSS控制。

docs当前仅提供什么：

当前，文档提供了几种插入图标的方式。所有这些都包含一些可编写的安静代码。

a）直接嵌入SVG：

<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/></svg>

b）或使用SVG精灵：

<svg class="bi" width="32" height="32" fill="currentColor">
    <use xlink:href="/path/to/bootstrap-icons.svg#chevron-right"/>
</svg>

c）或链接外部图像：

<img src="/path/to/bootstrap-icons/chevron-right.svg" alt="" width="32" height="32" title="Bootstrap">

（不讲CSS变体，基本上与选项a相同），只是比较乏味。）

或者我想念什么吗？

解决方法

在 1.2 版中，现在包含 .woff 文件，您可以通过键入来使用它 "<i class = 'bi-alarm'> </i>" 喜欢字体很棒。

<link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css">

来源：https://blog.getbootstrap.com/2020/12/11/bootstrap-icons-1-2-0/

,

还有什么作用：

<?php
//Loading each comment with its user's name and file
$query8 = "SELECT comments.commentID,comments.userID,comments.content,comments.file,comments.file_name,comments.file_mime,comments.file_size,users.name FROM comments JOIN users ON comments.userID=users.id WHERE ticketID=:ticketID";
$stmt8 = $connection->prepare($query8);
$stmt8->bindParam('ticketID',$ticketID,PDO::PARAM_INT);
$stmt8->execute();
$count8 = $stmt8->rowCount();
if($count8 > 0){
  while($row8 = $stmt8->fetch(PDO::FETCH_ASSOC)){
    $commentID = $row8["commentID"];
    $cfilesize = $row8["file_size"];
    $cfiletype = $row8["file_mime"];
    $cfilename = $row8["file_name"];
    $cfile = $row8["file"];
    $userID = $row8["userID"];

    echo nl2br($row8["name"].": ".$row8["content"]."\n"."<label>Files: </label>"
                   ."<a href='ticketinfo.php?comment_id=$commentID'>$cfilename</a>"."\n\n");
  }
}else {
  echo "Error no comments";
}

//In case comment file is clicked
if(isset($_GET["comment_id"])){
  header("Content-length: $cfilesize");
  header("Content-Type: $cfiletype");
  header("Content-Disposition: attachment; filename=$cfilename");
  ob_clean();
  flush();
  echo $cfile;
  exit;
 }

然后在你的 main.css

npm install bootstrap@next

npm install bootstrap-icons

然后在 HTML 中

@import url('../../../node_modules/bootstrap-icons/font/bootstrap-icons.css');

,

看看下面的documentation

在 HTML

中使用此链接

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">