Font Awesomeでcontent指定してるのに、□になる・・・
そうです。
この四角！何でよ！
何しても直らない！
Font AwesomeをCSS内でcontent指定して使う手順
絶対にいろんなところでつまづいている人いると思う。CSS内で指定するときは まず、headerでCDN読み込み
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
そんで、CSS内擬似要素（:after、:before）で指定
.fontawe:after{
display:block;
content:"\f061";
font-family: "Font Awesome";
width:20px;
height:20px;
}
これだと□になります。
間違い要素をまとめていくと
擬似要素の使い方は自分で調べてもらうとして、 擬似要素内でどうしてFont Awesomeが□になってしまうのか、をまとめました。（間違い要素１） font-familyは「Font Awesome 5 Free」
正しいフォント指定はfont-family: "Font Awesome 5 Free";2018年8月現在で、Font Awesome のバージョン５フリー版を使う場合です。 古いブログだと「5 Free」がない記載があります。
（間違い要素２）contentは「\（バックスラッシュ）」付きのUnicode
正しいアイコン指定はcontent:"\f061";バックスラッシュがなかったり、半角￥マークになってたりしたら間違い。 よくありがちなのは、Font-awesomeのアイコン画面の一番左のコードを直接書くこと。
content:”<i class=”fas~~~~~~~”> は違いますよ。
contentで指定するときは、ユニコードをコピーしてください。
バックスラッシュもお忘れなく。
font-weightの指定がないと表示されない
ワタクシ、これによって１時間も悩まされました。font-weight:900;いろんなページをまさぐりまくっていたら確かに書いてありましたよ。こんな表がこのページに。
こんなページ誰も見ないでしょ！使い方のページに書いといてくれ〜と叫んだ。
Free版を表示するときは、font-weightを「９００」か「bold」で指定しないといけないようです。
確かにfont-weightを指定したら、表示されました。
ここまでの道のり長かったなぁ〜・・・・。
コピペ用
.fontawe:after{
display:block;
content:"\f061";
width:20px;
height:20px;
font-family: "Font Awesome 5 Free";
font-weight:900;
}
これをぶち込んだら、とりあえずいけるはずです。
[wpap service=”with” type=”detail” id=”4839960224″ title=”6ステップでマスターする 「最新標準」HTML+CSSデザイン ~フレキシブルボックスレイアウトを使った、レスポ…”]]]>
情報発信の道具の一つが、ウェブサイトというメディアだからです。
ウェブサイトは作るだけでは意味がないのです。
100歳のおじいちゃんたちに情報発信したければ、ウェブではない方が得策です。
そんな話を中心に話したいと思います。]]>
読んで字の如く。「スクリブトによるファイルへの書き込み」を許可するかどうかのチェックで、Bodymovinを使ってファイルを書き出す時に、「あなたのPCの任意の場所に新しいファイルを作りますよ、いいですか」という確認。
ここにチェックを入れておかないと、書き出しの際にエラーがでる場合があります。
+Life Studioのロゴをすべてパスデータで起こしました。
と言っても、Adobe Illustratorで制作している場合は、コピペで対応できるので、楽です。
通常、After Effectsでモーショングラフィックスを制作している方なら、難しいことではないですね。
キーフレームやパスを使って、素材に動きをつけていきます。
こんな感じで、動きをつけ終えたら、書き出していきましょう。
メニューで
ウィンドウ ＞ 拡張機能 ＞ Bodymovin を開くと書き出し用の画面が出てきます
書き出すコンポにチェックをいれ、書き出すフォルダを指定します（フォルダが表示されていない場合は
をクリックして指定）
Bodymovin画面の左上にある「Render」ボタンを押すと、JSONファイルの書き出しが始まります。
Renders Finishedと表示されたら、レンダリング完了です。
書き出したフォルダを見てみると、JSONファイルが出来上がっていると思います。
これで、書き出し完了です！
「Demo」で書きだすと、htmlファイルが生成され、それをブラウザで開けば動作を確認できます。
今までウェブに埋め込む動きのあるコンテンツといえば、GIFアニメやmp4などの動画ファイルがありました。
GIFアニメは色数の制限があり、mp4の埋め込みはブラウザ対応が至難の技で、
HTML5から採用されたmediaタグにおいても、かなり手間がかかりますね。。
右側の「Clone or download」をクリックしてダウンロードしましょう。
extensionフォルダ内のbodymovin.zxpを先ほどのZXP Installerにドロップします。
その後、Macの変更許可を聞かれるので、ユーザ名とパスワードを入力します。
ユーザ名、パスワードを入力し「OK」をクリックすると、インストールが完了します。
このサイトは「.studio」という村の「plife」さん。
「.com」という村や「.net」という村にも同じ「plife」さんがいることもあるのです。鈴木さんが隣町にもいる感じです。
あのサイトは「192.168.xxx.xxx」、このサイトは「192.168.yyy.yyy」なんて覚えていられないので、覚えやすいように「ドメイン」を使うのです。
「あそこの村の鈴木さん（ドメイン）」＝「日本のソーダ村のメロン地区30−2の鈴木さん（IPアドレス）」に変換する、みたいな感じです。
個人的にはかなり面白い方向性だな、と思います。
かなり細かくカテゴリ分けしてあります。
カテゴリーだけでなく、キーワードで検索できるのがいいですね。
また、「Shuffle」をクリックすると、更新日に関係なくランダムに並ぶようになります。
予期せず出会ういいデザインがあるのが魅力です。
カテゴリ分けは最小限。カラムで分けられているのはいいですね。
