آیکن align-center فونت آوسام - دو رنگ

<font-awesome-icon icon="fa-duotone fa-align-center" />
<FontAwesomeIcon icon="fa-duotone fa-align-center" />
.my-icon {
    position: relative;
    font: var(--fa-font-duotone);
    font-style: normal;
}
.my-icon:before {
    position: absolute;
    content: "\f037";
    opacity:0.5
}
.my-icon:after {
    content: "\f037\f037";
}
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 30px;height: 30px;fill: black">
    <path d="M128 352C110.3 352 96 337.7 96 320C96 302.3 110.3 288 128 288H320C337.7 288 352 302.3 352 320C352 337.7 337.7 352 320 352H128zM128 96C110.3 96 96 81.67 96 64C96 46.33 110.3 32 128 32H320C337.7 32 352 46.33 352 64C352 81.67 337.7 96 320 96H128z"/>
    <path style="opacity: 0.5" d="M32 480C14.33 480 0 465.7 0 448C0 430.3 14.33 416 32 416H416C433.7 416 448 430.3 448 448C448 465.7 433.7 480 416 480H32zM32 224C14.33 224 0 209.7 0 192C0 174.3 14.33 160 32 160H416C433.7 160 448 174.3 448 192C448 209.7 433.7 224 416 224H32z"/>
</svg>
                    
<i class="fa-duotone fa-align-center"></i>

نحوه استفاده از آیکن align-center حالت دو رنگ

جهت استفاده از آیکن align-center در حالت دو رنگ روش های مختلفی دارد.
درصورتیکه فایل CSS فونت آوسام را دانلود کرده و در وب سایت خود فراخوانی نموده اید، کافیست تگ <font-awesome-icon icon="fa-duotone fa-align-center" /> را درون محل موردنظر قراردهید.
راه حل دیگر جهت نمایش آیکن align-center در حالت دو رنگ، میتوانید بصورت مستقیم از کد SVG استفاده نمایید.
همچنین در کدهای بالا، روش های مختلفی جهت استفاده در اپلیکیشن React و Vue آورده شده است.
فونت آوسام، یک مجموعه آیکن ها می باشد که در تمام برنامه های گرافیکی، آفیس و وب سایت قابل استفاده می باشد. استفاده از فونت آوسام راحت و سریع می باشد. آیکن های فونت آوسام قابلیت تغییر رنگ و اندازه را داشته و سبک و کم حجم می باشد.