如何在Angular中使用旧版Font Awesome图标？以Ship图标为例

Great question! I’ve dealt with this exact issue before when needing to preserve the classic look of older Font Awesome icons in Angular projects. Here are three solid approaches to get that original ship icon showing up instead of the redesigned version:

1. Install a Specific Older Version of Font Awesome #

The old ship icon you’re referencing is likely from Font Awesome 4.x (since 5+ releases redesigned many icons, including ship). Here’s how to lock into that version:

• First, uninstall any existing Font Awesome packages if you have them:

  npm uninstall @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesome
  

• Install the 4.7.0 version (the last stable release of Font Awesome 4):

  npm install @fortawesome/fontawesome-free@4.7.0 --save
  

• Update your angular.json to include the Font Awesome 4 CSS in your global styles:

  "styles": [
    "src/styles.css",
    "./node_modules/@fortawesome/fontawesome-free/css/font-awesome.css"
  ]
  

• Now you can use the old ship icon with the classic Font Awesome 4 class syntax:

  <i class="fa fa-ship"></i>
  

2. Embed the Old Icon’s SVG Directly #

If you don’t want to roll back your entire Font Awesome version, you can manually use the SVG code for the old ship icon:

• Extract the SVG path for the old ship icon (you can get this from archived Font Awesome versions or the W3Schools example you referenced). Here’s the typical SVG code for the classic ship icon:

  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M20 10c0 4.4-6 10-6 10H6s-6-5.6-6-10c0-3.3 2.7-6 6-6h8c3.3 0 6 2.7 6 6z"></path>
    <path d="M14 12v5"></path>
    <path d="M10 12v5"></path>
    <path d="M16 12v1"></path>
    <path d="M8 12v1"></path>
  </svg>
  

• You can either paste this SVG directly into your Angular templates where you need the icon, or wrap it into a reusable component for easier use across your app.

3. Use Font Awesome’s Legacy Icons (Pro Subscription Only) #

If you have a Font Awesome Pro subscription, you can access legacy icon variants directly:

• Search for "ship" in the Pro library, then look for the icon marked with the "Legacy" tag (this is the older design you’re after).
• Import its specific identifier into your Angular project using the standard @fortawesome/angular-fontawesome setup, ensuring you reference the legacy variant’s name instead of the default updated icon.

Quick Context #

Font Awesome regularly updates icon designs to keep their library modern. The ship icon on the current official site is a redesigned version introduced in later releases, which replaced the older, more stylized ship icon from earlier versions.

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