yunico's fluffy life

横着主婦の暮らしの詰め合わせ

トップ画像

SCROLL

Twitterのアイコンフォントを一度に全て𝕏に変えるCSSコード¦はてなブログ用、Font Awesomeどちらも対応

記事内に商品プロモーションを含む場合があります。

TwitterがXに変わって、ブログのリンクに使っている鳥さんのアイコンフォントも新しいものに変えなきゃなぁと思いつつ、そのままの状態で早5ヶ月。

すぐに変えなかった理由は、新しいアイコンフォントのコードが分からなかったから՞

鳥のマークだった頃は【はてなブログのアイコンフォント】を使用していたのですがXのコードは公開されておらず(多分)、手付かずになっていました。

今回は、今使っているアイコンフォント(はてなブログ用フォント、Font Awesomeどちらも対応)をそのまま、「𝕏」に書き換える方法をCSSコードで実装しました。

 

 

 

𝕏に書き換えるコード

コード使用のお願い
公開しているCSSコードは個人利用のコピペはOKですが、ブログなどでカスタマイズ方法を紹介する場合は、本記事をリンクして引用である旨の表記が必須です。
どうぞよろしくお願い致します。

.blogicon-twitter:before {
    content: '𝕏'!important;
    font-weight: bold!important;
    }

はてなブログのアイコンフォントを使用している方はこれをそのままコピーしてお使いいただけます。

Font Awesomeのアイコンフォントを使用している方は、コードの先頭にある『.blogicon-twitter』の部分を.fa-twitterもしくは.fa-twitter-square(どちらか、既に使用しているコード)に書き換えてください。

 

 

はてなブログでのコードの使い方


デザイン設定ページから

  1. 🔧マークを選択。
  2. 下の方にあるデザインCSSを選択する。
  3. 出てくる入力欄に以下のコードをコピー&貼り付ける。

コードの編集は万が一を考慮して、事前にバックアップ(既存のコードをメモ帳やメール・ブログの下書きに入れておく)を取っておくと安心です。

 

 

思い付きでも出来た⟡.·

ある日から私の使っているスマホのキーボードでエックスを変換すると「𝕏」が表示されるようになりました。

ロゴは何か特別なデザインだと思っていたけど、どうやら文字コード「U+1D54F」の数学用英数字記号という特殊文字なんだそうです(参考:Twitterの新ロゴ「X」にパクリ疑惑が浮上しフォントの制作者がコメントを発表 - GIGAZINE)。

変換で出せるなら、そのまま文字を旧アイコンフォントに書き換えられないかやってみたら無事できました⟡.·

複数箇所に使っているコードを1つずつ書き換える手間もなくなるので、まだ鳥さんのアイコンフォントを使用されている方はぜひ試してみてね。

そして…サヨナラTwitterの鳥さん…
私はあの青い鳥の方が好きだなぁ。