求助：如何在Angular 2项目中添加Open-iconic？图标未显示

Hey there! Let's get those Open-iconic icons showing up in your Angular project—this is a common hiccup, so we'll work through it step by step.

First, let's cover the basics to rule out simple mistakes:

1. Double-Check Installation & Configuration #

Make sure you actually installed Open-iconic correctly first. Run this command if you haven't already (or re-run it to confirm):

npm install open-iconic --save

Next, let's verify your angular-cli.json setup. The key here is making sure the path to the Open-iconic CSS is correct, and it's added in the right place. In your angular-cli.json, look for the styles array under the apps section—it should look something like this:

"apps": [
  {
    // ... other configs
    "styles": [
      "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "../node_modules/open-iconic/font/css/open-iconic-bootstrap.css"
    ],
    // ... other configs
  }
]

Note: The relative path (../) depends on your project structure. If angular-cli.json is in your project root (same level as node_modules), you can use ./node_modules/... instead—either works, but double-check that the path doesn't throw a 404 later.

2. Restart Your Angular Dev Server! #

This is the step everyone forgets sometimes. Any changes to angular-cli.json require you to stop your running ng serve command and restart it. Just kill the process, then run:

ng serve

This ensures the new styles are picked up by the CLI.

3. Verify Icon Usage Syntax #

Open-iconic uses specific class names to render icons—make sure you're using them correctly. For example, a delete button with an icon should look like this:

<button class="btn btn-danger">
  <span class="oi oi-trash"></span> Delete Item
</button>

• The base class oi is required for all icons
• Follow it with oi-[icon-name] (double-check exact names to avoid typos!)

4. Alternative: Import via Global Stylesheet #

If modifying angular-cli.json isn't working, try importing the CSS directly into your global styles.css (or styles.scss) file. This is often more reliable because Angular resolves the ~ path to your node_modules folder automatically:

/* styles.css */
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~open-iconic/font/css/open-iconic-bootstrap.css";

After adding this, restart your dev server again to apply the changes.

5. Debug with Browser Dev Tools #

If icons still aren't showing, open your browser's dev tools (F12) and go to the Network tab. Look for any 404 errors related to Open-iconic files (either the CSS or font files). A 404 means your path is incorrect—adjust the path in your config or stylesheet until the file loads successfully.

Give these steps a try, and your icons should start showing up in no time!

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