首頁 > web前端 > css教學 > 如何使用 Unicode 區分常規字體 Awesome 5 圖示和實體字體 Awesome 5 圖示?

如何使用 Unicode 區分常規字體 Awesome 5 圖示和實體字體 Awesome 5 圖示?

Barbara Streisand
發布: 2024-10-24 10:39:29
原創
453 人瀏覽過

How to Distinguish Between Regular and Solid Font Awesome 5 Icons with Unicode?

Font Awesome 5 Unicode:了解fas 和far 之間的區別

在Font Awesome 5 中,「fa-star」和「far fa-star」圖標使用不同的字體粗細分別建立實心和常規星形圖示。兩個圖示共享 Unicode 代碼點「f005」。

在提供的 CSS 程式碼中,常規星形和實心星形之間的差異源自於字體粗細不一致。若要在常規版本和純色版本之間切換,請調整樣式表中的font-weight 屬性:

<code class="css">input.star:checked ~ label.star:before {
  /* Solid star */
  font-weight: 900;
}

label.star:before {
  /* Regular star */
  font-weight: 200;
}</code>
登入後複製

常規版本的font-weight 為200,純色版本的font-weight 為900,現在您可以動態地根據使用者輸入在兩個星形表示之間切換。

以上是如何使用 Unicode 區分常規字體 Awesome 5 圖示和實體字體 Awesome 5 圖示?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板