如何在 angular 1.6 / Bootstrap 3 项目中使用 glyphicons pro

Question

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

我在 Whosebug 上找到了一个 post，但它似乎有点过时，因为 bootstrap 现在正在使用 Sass，并且文件夹结构已更改.

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

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

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

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

Answer 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>

Answer 2

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

我在 github

上创建了一个项目

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

解释了手动修改 bootstrap 以便它使用 glyphicons pro 的分步过程（您仍然需要购买 glyphicons pro ；）

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

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

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

我没有包括灯光、掉落、x2、x3...X6、翻转、旋转 css class。

如何在 angular 1.6 / Bootstrap 3 项目中使用 glyphicons pro

How to use glyphicons pro within an angular 1.6 / Bootsrap 3 project

twitter-bootstrap

angularjs

glyphicons