如何在 Angular 1.6 / Bootstrap 3 项目中使用 glyphicons pro答案

【问题标题】：How to use glyphicons pro within an angular 1.6 / Bootsrap 3 project如何在 Angular 1.6 / Bootstrap 3 项目中使用 glyphicons pro
【发布时间】：2018-02-27 21:31:33
【问题描述】：

我购买了 Glyphicons Pro，我想在我的 Angular 1.6.x/bootstrap 3 项目中使用它。（我的第一个项目）。我用过 Yeoman (yo gulp-angular)，所以我也在用 Gulp（非常基础的知识）

我在 stackoverflow 上找到了一个帖子，但似乎有点过时了，因为 bootstrap 现在使用的是 Sass，而且文件夹结构也发生了变化。

pro包里有bootstrap的例子，但是没有说明，所以有点迷茫，也不知道用的是什么版本的bootstrap。

另外，我需要在 gulp 中包含更改，以便它建立起来。

有人知道如何在 Bootstrap3+Angular 1.6 中包含 Glyphicons pro 吗？

（我在这里发布问题也很新，请随时提出建议以改进我的问题）

【问题讨论】：

标签： angularjs twitter-bootstrap glyphicons

【解决方案1】：

Try these: Dont forget to add libraries:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="container">
      <h2>Glyphicon Examples</h2>
      <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>    
      <p>Envelope icon as a link:
        <a href="#">
          <span class="glyphicon glyphicon-envelope"></span>
        </a>
      </p>
      <p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
      <p>Search icon on a button:
        <button type="button" class="btn btn-default">
          <span class="glyphicon glyphicon-search"></span> Search
        </button>
      </p>
      <p>Search icon on a styled button:
        <button type="button" class="btn btn-info">
          <span class="glyphicon glyphicon-search"></span> Search
        </button>
      </p>
      <p>Print icon: <span class="glyphicon glyphicon-print"></span></p>      
      <p>Print icon on a styled link button:
        <a href="#" class="btn btn-success btn-lg">
          <span class="glyphicon glyphicon-print"></span> Print 
        </a>
      </p> 
    </div>

  </body>
</html>

【讨论】：

您确定要回答这个问题吗？ Glyphicons Pro 是 bootstrap 提供的 glyphicons 的超集，CSS 类的末尾有一个额外的“s”。

【解决方案2】：

至少我设法为我的项目找到了一个可行的解决方案。

我在 github 上创建了一个项目

https://github.com/dev-mansonthomas/bootstrap3-glyphicons-pro

这解释了手动修改引导程序以使其使用 glyphicons pro 的分步过程（您仍然必须购买 glyphicons pro ;）

我稍后会尝试自动执行此操作。

基本上，我创建了一个 _glyphicons-pro.scss，并使用 scss 语法从 glyphicons pro bootstrap css 示例中注入 CSS 代码。

到目前为止，我已经对其进行了轻微的测试，如果需要，我会更新 github 项目。

我没有包括 light、drop、x2、x3...x6、flip、rotate css 类。

【讨论】：