tag:text.Baldanders.info,2017-12-12:/tags 2017-12-12T20:22:50+09:00 帰ってきた「しっぽのさきっちょ」 https://text.baldanders.info/images/avatar.jpg https://text.baldanders.info/images/avatar.jpg tag:text.Baldanders.info,2017-12-12:/remark/2017/12/font-awesome-5-released/ 2017-12-12T11:22:50+00:00 2019-07-01T13:48:09+00:00

5 系では， Web フォントではなく， SVG と JavaScript を組み合わせた方法がオススメらしい。

Spiegel https://baldanders.info/profile/ <p>現在 Font Awesome のバージョンは 4.x 系と新しくリリースされた 5 系のふたつがあるようで， 5 系ではサポート・サイトも新しくなっている。</p> <table> <thead> <tr> <th style="text-align: center">Version</th> <th style="text-align: left">URL</th> </tr> </thead> <tbody> <tr> <td style="text-align: center">4.7</td> <td style="text-align: left"><a href="http://fontawesome.io/" target="_blank">fontawesome.io</a></td> </tr> <tr> <td style="text-align: center">5.0</td> <td style="text-align: left"><a href="https://fontawesome.com/" target="_blank">fontawesome.com</a></td> </tr> </tbody> </table> <p>5 系では従来のフリー版の他に Pro 版も用意されていて， Pro 版では千個以上のアイコンや関連ツールが用意されている。</p> <ul> <li><a href="https://fontawesome.com/license" target="_blank">License | Font Awesome</a></li> <li><a href="https://fontawesome.com/pro" target="_blank">Font Awesome Pro | Font Awesome</a></li> </ul> <p>フリー版では CDN による配信もあるようで， <a href="https://www.bootstrapcdn.com/fontawesome/" target="_blank" title="Font Awesome · BootstrapCDN by MaxCDN">BootstrapCDN</a> を使わなくともよくなった。</p> <ul> <li><a href="https://fontawesome.com/get-started/web-fonts-with-css" target="_blank">Get started with Font Awesome</a></li> </ul> <p>CSS はこんな感じで指定できる。</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://use.fontawesome.com/releases/v5.0.1/css/all.css&#34;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span><span class="p">&gt;</span> </span></span></code></pre></div><p>5 系で最も大きく変わったのが HTML 上のアイコン名。 たとえば 4.x 系で PDF ファイルを表すアイコンは</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;fa file-pdf-o&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">i</span><span class="p">&gt;</span> </span></span></code></pre></div><p>だったが， 5 系では</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;far file-pdf&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">i</span><span class="p">&gt;</span> </span></span></code></pre></div><p>になった。 4.x 系から 5 系への変更については，以下が参考になる。</p> <ul> <li><a href="https://fontawesome.com/how-to-use/upgrading-from-4" target="_blank">Upgrading from Version 4</a></li> </ul> <p>アイコンのサイズ指定やアニメーション機能などについては従来のやり方がそのまま使えるようだが， 5 系では， Web フォントではなく， SVG と JavaScript を組み合わせた方法がオススメらしい。</p> <ul> <li><a href="https://fontawesome.com/how-to-use/svg-with-js" target="_blank">SVG with JavaScript</a></li> </ul> <p>アイコン制御用の JavaScript も CDN で用意されている。</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">defer</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://use.fontawesome.com/releases/v5.0.1/js/all.js&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span> </span></span></code></pre></div><p>アイコンの指定の仕方は Web フォント版と同じ。</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">i</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;fas fa-sync fa-2x fa-spin&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">i</span><span class="p">&gt;</span> </span></span></code></pre></div><figure> <blockquote> <i class="fas fa-sync fa-2x fa-spin"></i> </blockquote></figure> <p>このサイトでも JavaScript 版を導入した。 <a href="https://baldanders.info/" target="_blank" title="Baldanders.info">本家サイト</a>は&hellip; しばらく放置の方向で（笑）</p> <h2>ブックマーク</h2> <ul> <li><a href="https://saruwakakun.com/html-css/basic/font-awesome" target="_blank">【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう</a></li> <li><a href="https://website-usability.info/2015/12/entry_151217.html" target="_blank">アイコンフォントか？ SVG アイコンか？ — Website Usability Info</a></li> <li><a href="https://qiita.com/Garyuten/items/6d68da5cdac6dab9ba26" target="_blank">Font Awesome 5 Freeで疑似要素(:after,:before)のcontent指定する場合 - Qiita</a></li> </ul>