在反应中的方形和圆形按钮内使用 faPlay 图标居中 fontawesome 组件

Posted 2023-03-06

【中文标题】在反应中的方形和圆形按钮内使用 faPlay 图标居中 fontawesome 组件

【英文标题】：centering fontawesome component with faPlay icon inside a square and round button in react

【发布时间】：2019-10-23 17:43:12

【问题描述】：

我使用 reactjs、react-bootstrap、bootstrap 和 fontawesome 作为依赖项。

我在 react-bootstrap 按钮中有一个 fontAwesome 组件，它具有 text-center 作为类名，其他所有图标都以相同的方式居中，没有问题，除了 faPlay 图标似乎有点偏左。

我应该补充一点，父按钮是一个长度为 2em 的正方形。

这里是action。

这里是module，它在 repo 中包含该组件。

faPlay 没有某种特殊的 css 或类似的东西， 那么是什么导致它没有居中，但其他一切都是？

【参考方案1】：

这是一个光学illusion。目前以horizontally和vertically为中心。

【讨论】：

我尝试（在纸上）使用相同的推理来使文本居中，左右空格相等，这给了我一个不以重心为中心的三角形。所以我想我应该手动居中。

请在 fabPlay 图标中添加 background: white; 到 svg 并检查。 :D

我看了看，有点像上面的1px

【参考方案2】：

添加 Flexbox CSS 属性使其居中

button 
    display: flex;
    justify-content: center;
    align-items: center;

【参考方案3】：

这是 scss 中的解决方案。这是looks。需要一些反馈，这只是一种错觉还是我说得对？

@function sqrt($r) 
    $x0: 1;
    $x1: $x0;

    @for $i from 1 through 10 
        $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
        $x0: $x1;
    

    @return $x1;


.fa-play-circumcenter svg 
    /* the faPlay icon is centered by the point that meets the (triangle hight)/2 .
    this class centers it by its circumcenter .

    consider that the faPlay icon is an equilateral triangle ,
    horizontally centered (left and right white spaces are equal ) 

    and because of these two rules in the parent button :
    width: 2em;
    height: 2em;

    the width of the button is equal to two times a triangle side .

    you can then calculate the percentage to offset
    the whole svg icon so that the circumcenter of the triangle
    meets the center of the button .*/

    -webkit-transform: translateX(percentage(sqrt(3) / 24));
    -ms-transform: translateX(percentage(sqrt(3) / 24));
    transform: translateX(percentage(sqrt(3) / 24));

【讨论】：

它的解决方案太长，而且不是精确的解决方案

我能知道为什么吗？包含三角形图标的按钮是一个长度为 2em btw 的正方形。

因为这是for循环解法，每次数值都会变化，并且应用了太多的数学规则，最终结果可能以点为单位，所以有时它不是最好的解法！！