在Webpack与Vue.js中使用@font-face遇图标不显示问题求助

Hey there! Let's work through why your brand icons aren't showing up when you use <i class="brand-stack-overflow"></i> in your Vue components. Since you're using a Webpack template without a visible webpack.config.js, here's how to diagnose and fix the problem:

1. Double-Check Your @font-Face Paths #

First, make sure the paths in your _brands.sass are relative to the SASS file's location. Since your SASS file lives at /src/assets/sass/0-plugins/_brands.sass and fonts are in /src/assets/fonts/, the path should go up one level to reach the fonts folder. Your @font-face should look something like this:

@font-face
  font-family: 'Brands'
  src: url('../fonts/brands.eot')
  src: url('../fonts/brands.eot?#iefix') format('embedded-opentype'),
       url('../fonts/brands.woff') format('woff'),
       url('../fonts/brands.ttf') format('truetype'),
       url('../fonts/brands.svg#Brands') format('svg')
  font-weight: normal
  font-style: normal

A common mistake here is using absolute paths or incorrect relative paths, which means Webpack can't locate the font files to bundle them.

2. Verify Webpack's Font Loader Configuration #

Even though you don't see a root webpack.config.js, Vue templates usually hide the core config in the build/ folder—look for webpack.base.conf.js. Inside this file, check the module.rules section to ensure there's a rule handling font files:

{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: 'fonts/[name].[hash:7].[ext]'
  }
}

If this rule is missing, Webpack won't process your font files at all—they'll never make it to your output directory. If you don't find this rule, add it to the module.rules array in webpack.base.conf.js.

3. Confirm Your Icon Class Matches the Font's Unicode #

Make sure the .brand-stack-overflow class correctly references the font family and uses the right Unicode character for the Stack Overflow icon. For example:

.brand-stack-overflow
  font-family: 'Brands'
  content: '\f16c' // Replace this with the actual Unicode from your Brands font

If the Unicode is wrong, the browser won't render the correct icon—double-check the value against your font's documentation or a tool like FontForge to inspect the font file.

4. Check if Fonts Are Being Bundled and Loaded #

• After running npm run build, look in your dist/ folder for a fonts/ directory containing your brands files. If they're missing, go back to step 2 to fix the Webpack loader rule.
• In development mode, open your browser's DevTools > Network tab and search for the font files. If you see a 404 error, that means the path to the font is incorrect—adjust your @font-face paths or Webpack's output name option in the loader config.

5. Clear Browser and Build Cache #

Sometimes old cached resources can prevent new fonts from loading. Try:

• Clearing your browser's cache (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on Mac)
• Stopping and restarting your Webpack dev server to ensure fresh assets are served

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