如何在AMP WordPress模板中使用Font Awesome？移动端图标不显示求助
Hey there, let's get those Font Awesome icons working in your AMP-powered WordPress site. I’ve debugged a bunch of similar issues, so here’s a step-by-step breakdown to resolve this:
1. Verify AMP Plugin’s External Resource Whitelist
AMP has strict rules about loading external resources, and your Font Awesome CSS might be getting blocked by the AMP for WordPress plugin. Here’s how to fix that:
- Head to your WordPress Dashboard → AMP → Settings (look for the "Advanced" or "External Resources" tab if it’s not directly visible).
- Find the section labeled "Allowed External Stylesheets" or "Whitelisted Resources".
- Add your Font Awesome CSS URL here (e.g.,
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css). - Save changes and test your AMP page again.
2. Switch to an AMP-Compatible Font Awesome Loading Method
If the whitelist doesn’t work, try a more AMP-friendly way to load Font Awesome:
- Skip traditional
<script>tags to load Font Awesome—AMP restricts certain script types. Instead, use a<link rel="stylesheet">tag in your theme’sheader.php(or via a custom plugin snippet) that points to the Font Awesome CSS file. - For the most reliable fix, use inline SVG icons directly in your posts. Grab the SVG code for any Font Awesome icon from their library, paste it into your post editor (switch to HTML mode), and it’ll render without needing external resources at all.
3. Check for Theme or Plugin Conflicts
Sometimes your active theme or other plugins might interfere with AMP’s resource loading:
- Temporarily switch to a default WordPress theme (like Twenty Twenty-Three) and test the AMP page. If icons show up, your theme is the culprit—you’ll need to modify its AMP template to ensure Font Awesome CSS is enqueued properly.
- Disable other plugins one by one to see if any are blocking Font Awesome in AMP mode. Re-enable them once you find the conflict and check if there’s an AMP-compatible update for that plugin.
4. Use a Font Awesome Plugin with AMP Support
If you’re using custom code to load icons, consider switching to a maintained plugin:
- The official Font Awesome plugin has built-in AMP compatibility in its latest versions. Install it, activate the "AMP Support" option in its settings, and it’ll handle loading icons correctly for both desktop and AMP pages automatically.
5. Debug with Browser Developer Tools
For precise troubleshooting:
- Open your AMP page on mobile (or use Chrome DevTools’ mobile emulator).
- Right-click → Inspect to open the console. Look for error messages like "Failed to load resource" for Font Awesome files, or AMP validation errors (marked in red). These will tell you exactly why the icons aren’t loading.
Give these steps a try—most of the time, the issue is either a missing whitelist entry or an incompatible loading method. Let me know if you hit any snags!
内容的提问来源于stack exchange，提问作者Titus Sutio Fanpula
