Bootstrap 引导图标未显示

rekjcdws  于 2022-12-31  发布在  Bootstrap
关注(0)|答案(3)|浏览(169)

我正在开发一个angularjs应用程序,使用 Bootstrap 作为用户界面。我从YouTube下载了一个教程,我正在遵循,我面临的问题是我的图标没有显示。

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container-fluid"> 
    <div class="row">
      <div class="col-xs-12">
        <h1><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> Hello Plunker!</h1>
      </div>

    </div>
    <div class="row">
      <div class="col-sm-3">
        Nav
      </div>
      <div class="col-sm-9">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
    </div>
  </body>

</html>
hfyxw5xn

hfyxw5xn1#

我建议你使用Font Awesome图标包,因为Bootstrap v4 glphicon不再被支持。我甚至不确定我看到过一个网站使用Bootstrap的glphicon。几乎每个使用图标的网站都是Font Awesome的。看看吧,我相信你会找到你需要的。
字体真棒:http://fontawesome.io/icons/
如果这还不够,您可以使用SVG,但来自不同的存储库:https://simpleicons.org/
或者这些,也来自不同的存储库:http://konpa.github.io/devicon/

bybem2ql

bybem2ql2#

自Bootstrap 4起,删除了在版本3中与Bootstrap交付件一起打包的glyphicons字体。
更多信息,沿着替代选项,可以在这里找到。

sbtkgmzw

sbtkgmzw3#

对我来说,我安装了节点模块,但没有图标本身,这在我的应用程序中需要它。scss:

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");

我从这里得到它

相关问题