如何通过CSS将FontAwesome 6图标移动到页面右上角

你的代码存在两个核心错误，导致图标无法定位到右上角：

• 把FontAwesome的<i>图标标签写在了<head>标签内部：HTML中<head>是存放元信息、引入外部资源的区域，内部的可视元素不会按照预期渲染到页面视口，所有需要展示给用户的内容都必须放在<body>标签内。
• CSS属性使用错误：text-align: center的作用是控制元素内部的行内/行内块内容对齐方式，无法控制元素自身在页面的位置，自然不能实现移动到右上角的效果。

使用固定定位将图标固定在页面右上角，不会随页面滚动偏移，具体代码如下：

修正后的HTML结构 #

<head>
  <!-- FontAwesome引入脚本保留在head中即可 -->
  <script src="https://kit.fontawesome.com/d1950e8188.js" crossorigin="anonymous"></script>
</head>
<body>
  <!-- 图标标签移动到body内，添加专属类避免影响其他元素 -->
  <i class="fa-solid fa-cart-shopping cart-icon"></i>
  <!-- 其余页面内容正常写在body中即可 -->
</body>

对应CSS代码 #

.cart-icon {
  /* 固定定位，参考对象为浏览器视口 */
  position: fixed;
  /* 距离视口顶部、右侧各20px，可根据设计需求调整数值 */
  top: 20px;
  right: 20px;
  /* 可按需自定义图标样式 */
  font-size: 24px;
  color: #222;
  /* 调高层级避免图标被其他页面元素遮挡 */
  z-index: 999;
}

• 如果需要图标随页面滚动同步移动，把position: fixed改为position: absolute即可，注意此时需要给图标最外层的父容器添加position: relative，定位参考对象会从浏览器视口切换为该父容器。
• 如果需要给图标加购物车跳转功能，直接用<a>标签包裹<i>标签，给<a>配置对应跳转地址即可。

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