Ligatures documentation: Screenshots too generic, not depicting the relevant intermediary step(s) of the transformation

[porg]

Bug description

Feedback on article "Using Ligatures"

https://docs.fontawesome.com/desktop/add-icons/ligatures

Status Quo

Section: Set the Font/Typeface to Font Awesome 6

https://docs.fontawesome.com/desktop/add-icons/ligatures#set-the-fonttypeface-to-font-awesome-6

• Shows a screenshot with a text layer with the content: "Plain Old Text Layer"
  

Section: Type the Icon’s Name

https://docs.fontawesome.com/desktop/add-icons/ligatures#type-the-icons-name

• Shows a screenshot with a text layer with the rendered ligature, which is the rocket icon.

Critique

• ❌ The intermediary step is not depicted. Just the generic screenshot of a text layer.
• ❌ You get no idea how this works in practice if you have yet not seen it in action.

Proposed improvement

• 💡 Text layer with "rocke" and when the last letter in the ligature "t" is typed it transforms into the rocket icon.
  • As a intermediary screenshot.
  • Or better a short video clip typing the ligature and seeing how it gets transformed on the fly when typed completely.

Font Awesome version

v6

Application and Operating System

• Feedback on your documentation

Web bug report checklist

• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate