search

dreamers-land / Web-Frontend

浴火重生許願池 Wireframe 即 UI 版
0 stars 0 forks source link

FontAwesome Pro kit #10

Open jimmyhappy19920308 opened 3 years ago

jimmyhappy19920308 commented 3 years ago

https://monospace-work.slack.com/archives/GC4AHA05C/p1605064098008200

bluet commented 3 years ago

thanks @yingming25

But it'd be even better if you could provide a digest or to describe and provide key info here. :-)

bluet commented 3 years ago

Jimy 3 days ago 我目前是引入 FontAwesome CSS 的 CDN ，因為聽說 SVG 版有雷，也可能是覺得 SVG 版有些複雜，看 @Sid 吸管 對 FontAwesome SVG 版有沒有什麼看法 :laughing: (edited) 發現要用 kit 的方式，CDN 的方式準備要棄用了 :exploding_head:

透過以下的連結可以新增一個 kit https://fontawesome.com/kits (edited) Font AwesomeFont Awesome Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

進去後右上方有個 new kit 的按鈕可以新增一個新的 kit

在 Setting 的頁籤裡需要調整成 Pro 跟 webfont (edited)

設定完 kit 後記得要儲存設定 :laughing: 然後回到 How to Use 的頁籤複製 Kit 給我們 :kneel: (edited)

bluet commented 3 years ago

web font or svg - comparison: https://fontawesome.com/how-to-use/on-the-web/other-topics/performance

bluet commented 3 years ago

@SidStraw @yingming25 @CS6 要開 conflict detection 功能嗎？

https://fontawesome.com/how-to-use/on-the-web/other-topics/conflict-detection

bluet commented 3 years ago

How to use:

<script src="https://kit.fontawesome.com/a74fe4087b.js" crossorigin="anonymous"></script>

Example:

<!doctype html>
<html>
  <head>
    <!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/a74fe4087b.js" crossorigin="anonymous"></script>
  </head>

  <body>
    <!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! -->
    <i class="fas fa-thumbs-up fa-5x"></i>
  </body>
</html>
bluet commented 3 years ago

好像還能上傳自訂 icon，如果用 svg 版的話

Upload Your Own Icons! Add your own icons to a Font Awesome kit and easily use them right alongside (or as a replacement for) official Font Awesome icons!

Change this Kit to use SVG + Upload! This beta is available only on Pro and SVG-based Kits.

bluet commented 3 years ago

SVG version

<script src="https://kit.fontawesome.com/dc3280c5e8.js" crossorigin="anonymous"></script>
jimmyhappy19920308 commented 3 years ago

@bluet 我會更注意些，提供更多關鍵資訊細節，

conflict detection 似乎是升級版本後用來排除衝突的"診斷工具"，目前是使用 FontAwesome V5.15.1 最新版本，我覺得先不用，

@CS6 我有找到2個不確定適不適合當敲碗 icon 的 SVG :

https://www.flaticon.com/free-icon/bowl-and-chopsticks-of-japan_12775?term=bowl&page=11&position=31#

https://stock.adobe.com/images/id/190916156?as_campaign=Flaticon&as_content=api&as_audience=srp&tduid=05169d96538e234741efa31ab2249a30&as_channel=affiliate&as_campclass=redirect&as_source=arvato

jimmyhappy19920308 commented 3 years ago

上傳 SVG 有一些注意事項: https://fontawesome.com/how-to-use/on-the-web/using-kits/prepping-icons-for-upload

jimmyhappy19920308 commented 3 years ago

@CS6 不過我不確定我們是不是有必要用到敲碗的 icon XD， 目前敲碗數的文字部分在 iphone5 跟 4欄排版時也已經很擠了 QQ

擷取

擷取2