如何在Angular 1.6/Bootstrap 3项目中使用Glyphicons Pro

Hey Thomas, let's walk through getting Glyphicons Pro set up in your Angular 1.6/Bootstrap 3 project step by step—since you're using the gulp-angular Yeoman generator, I'll tailor this exactly to your setup.

First off, your confusion about version matching is totally valid. Glyphicons Pro’s Bootstrap-specific package is built exclusively for Bootstrap 3.x (which lines up perfectly with your project). You can confirm this quickly by checking the example files in your Pro package: if the stylesheets reference glyphicon-* classes (instead of Bootstrap 4’s bi-*), it’s definitely made for Bootstrap 3.

Start by unzipping your Glyphicons Pro package and locating the bootstrap/ subfolder—this has all the files you need:

• Copy the fonts/ folder (contains .eot, .woff, .woff2, .ttf, .svg files) into your project’s app/fonts/ directory (create the fonts folder if it doesn’t exist).
• Copy the scss/glyphicons-pro.scss (or css/glyphicons-pro.css if you’re not using Sass) into your project’s app/styles/ folder.

Since your project uses Bootstrap’s Sass build, update your main stylesheet to pull in Glyphicons Pro correctly:

• Open app/styles/main.scss (the main Sass entry point for gulp-angular projects)
• Import Glyphicons Pro before Bootstrap’s Sass files—this ensures Pro styles override any default Bootstrap icon styles if needed:

  // Import Glyphicons Pro first
  @import "glyphicons-pro";
  // Then import Bootstrap's core styles
  @import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
  

• If you’re using the plain CSS version instead of Sass, add this link to app/index.html before your Bootstrap CSS link:

  <link rel="stylesheet" href="styles/glyphicons-pro.css">
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  

The gulp-angular generator has a default font task, but let’s make sure it includes your Pro fonts:

• Open gulpfile.js and look for the fonts task (it may be nested under build or serve tasks)
• Add a reference to app/fonts/**/* to ensure Glyphicons Pro fonts get copied to your build folder. A typical updated task looks like this:

  gulp.task('fonts', function () {
    return gulp.src([
      'bower_components/bootstrap-sass/assets/fonts/**/*',
      'app/fonts/**/*' // This includes your Glyphicons Pro font files
    ])
    .pipe($.if($.env.production, gulp.dest('dist/fonts'), gulp.dest('.tmp/fonts')));
  });
  

• Test it by running gulp fonts—you should see the Pro font files in .tmp/fonts (development) or dist/fonts (production) afterward.

You can use Pro icons just like regular Bootstrap glyphicons, but with the Pro-specific class names (check your Pro docs for the full list):

<!-- Regular Bootstrap glyphicon -->
<span class="glyphicon glyphicon-heart"></span>
<!-- Glyphicons Pro icon -->
<span class="glyphicon glyphicon-heart-pro"></span>

Or integrate them into Angular directives like buttons:

<button class="btn btn-primary" ng-click="saveProject()">
  <span class="glyphicon glyphicon-save-pro"></span> Save Project
</button>

• If icons don’t show up, check the $glyphicons-font-path variable in glyphicons-pro.scss—it should point to your fonts folder, like:

  $glyphicons-font-path: "../fonts/" !default;
  

• Clear your browser cache—font files often get stuck in cache and don’t update immediately.
• Verify the Gulp font task ran correctly by checking .tmp/fonts or dist/fonts after running gulp serve or gulp build.

内容的提问来源于stack exchange，提问作者Thomas