在react中将faPlay图标位于方形和圆形按钮内的字体组件居中

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlay } from '@fortawesome/free-solid-svg-icons';
import './Button.css'; // 引入自定义样式文件

const Button = () => {
  return (
    <div className="button-container">
      <div className="button">
        <FontAwesomeIcon icon={faPlay} />
      </div>
    </div>
  );
};

.button-container {
  display: flex;
  justify-content: center; // 水平居中
  align-items: center; // 垂直居中
  height: 100px; // 设置父容器的高度
}

.button {
  display: flex;
  justify-content: center; // 水平居中
  align-items: center; // 垂直居中
  width: 100px; // 设置按钮的宽度
  height: 100px; // 设置按钮的高度
  border-radius: 50%; // 将按钮设置为圆形，如果需要方形按钮则省略该行
  background-color: #ccc; // 设置按钮的背景颜色
}