如何快速查询页面所使用的Font Awesome版本？

嘿，我之前也碰到过这种头疼的情况——用了编译后的CSS，完全看不到Font Awesome的版本信息，没法确定能用哪些图标。给你分享几个亲测有效的方法：

• 方法一：用fa-version图标直接显示版本号（Font Awesome 5及以上适用）
  这个是最直接的办法，Font Awesome从5.x版本开始提供了专门的fa-version图标，它会直接渲染成当前的版本号文本。你可以在浏览器控制台里执行这段代码：

  // 创建版本图标元素
  const versionIcon = document.createElement('i');
  // 根据你的图标样式前缀调整，比如fas/fab/far，老版本可能用fa
  versionIcon.className = 'fas fa-version';
  document.body.appendChild(versionIcon);
  // 输出版本号
  console.log('Font Awesome版本:', versionIcon.textContent);
  

  执行后，页面上会出现版本号文本，控制台也会输出结果，用完你可以删掉这个元素。

• 方法二：检查全局Font Awesome对象（如果项目引入了JS库）
  不少项目即使使用编译后的CSS，也会引入Font Awesome的JS核心文件来支持图标渲染。这种情况下，你直接在控制台输入：

  console.log(window.FontAwesome?.version);
  

  如果存在这个全局对象，就能立刻拿到版本号。

• 方法三：通过CSS规则反向推断版本
  如果上面两种方法都不生效，你可以通过标志性的CSS特征来判断：

  1. 前缀区分：Font Awesome 4.x的图标前缀统一是fa，而5+版本分成了fas（实心图标）、far（空心图标）、fab（品牌图标）等不同前缀。你可以新建一个测试元素，比如<i class="fab fa-github"></i>，如果能正常渲染，说明是5+版本；如果只有<i class="fa fa-github"></i>能渲染，大概率是4.x。
  2. 字体家族信息：在开发者工具的Elements面板新建一个图标元素，然后查看它的Computed样式，找到font-family属性。比如5+版本会显示类似"Font Awesome 5 Free"，6.x则是"Font Awesome 6 Free"，直接就能看到版本号。

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