Bootstrap Glyphicons在Chrome及PhoneGap真机测试中无法显示求助

Hey there! Let’s fix that Glyphicons not showing up issue in your PhoneGap app— I’ve dealt with this exact problem a handful of times, so I’ve got some reliable steps to walk you through.

• Double-check your file structure & font paths
  PhoneGap loads all app assets from the www folder, so first make sure your Glyphicon font files (that’s glyphicons-halflings-regular.eot, .svg, .ttf, .woff, .woff2) are stored correctly. A standard setup puts them in www/fonts/ while your Bootstrap CSS lives in www/css/.
  Open your Bootstrap CSS file and verify the @font-face block points to the right relative path. It should look something like this:

  @font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
         url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
         url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
         url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  }
  

  Adjust the ../ parts if your fonts are in a different subfolder relative to your CSS file.

• Update your config.xml for local asset access
  PhoneGap’s security settings can block local asset loading if not configured right. Open your config.xml and make sure these lines are present:

  <access origin="*" />
  <allow-navigation href="*" />
  <allow-intent href="*" />
  

  The * wildcard allows access to all local and remote resources, which is safe for development. If you want to lock it down later, you can replace * with file:///* to only allow local files.

• Clear cached files (app & build)
  Caching is a common culprit here. If you’ve adjusted paths but still see issues:

  • Uninstall and reinstall the app on your device/emulator (this wipes all cached assets).
  • If using the PhoneGap CLI, run phonegap clean before rebuilding to clear cached build files.

• Ditch the Bootstrap CDN for local files
  If you’re using a Bootstrap CDN link (like <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">), your app won’t load Glyphicons when offline (a common scenario for mobile apps). Switch to using local Bootstrap CSS and font files stored in your www folder— this ensures everything is bundled with the app and works offline.

• Verify your HTML markup
  Don’t overlook the basics! Make sure you’re using the correct class structure for Glyphicons: you need both the base glyphicon class and the specific icon class. For example:

  <span class="glyphicon glyphicon-search"></span>
  

  Forgetting the base glyphicon class is a super common mistake that makes icons disappear entirely.

Give these steps a try one by one— most likely the issue is either a path mismatch or a caching problem. Let me know if you still run into trouble after this!

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