SWELLでテキストリンクにアイコンを表示する方法

みなさんこんにちは。

しうです。

今回もブログの作成の段階で調べた内容について書いていこうと思います。

目次

テキストリンクアイコンについて

前回の記事でブロックエディタ上で内部・外部リンクを作成する方法を紹介しました。

↓この記事です。

あわせて読みたい
WordPress 外部リンクを画像付きで表示したい! その方法は? 皆さんこんにちは。 しうです。 今回は自分がブログを書いていて疑問に思っていたこと・その解決方法について書いていこうと思います。 はじめに みなさんブログ作成の...

この中で画像無しのリンク(テキストリンク)の方法を解説しましたが、そのテキストリンクの中でもアイコン付きのリンクを見たことがありませんか?

こちら  こういう文字の前後に表示されるアイコンの事です。

今回はこの作成方法を書いていこうと思います。

作成方法

SWELLには外部からフォントをダウンロードせずに使えるアイコンが存在します。

それらのアイコンについては以下のサイトに詳細が記載してあります。

今回はこれの使用方法について記載していこうと思います。

STEP
以下のように入力

[]とアイコンに関しては固定、icon-linkに関しては表示させたいアイコンを入力。

STEP
入力した文字列全体を網掛けしてツールバーのリンクを選択
STEP
表示したいURLを入力

これを「投稿を表示」で確認してみると以下のように表示されているのが確認できます。

まとめ

今回はSWELLでのテキストリンクアイコン表示方法について説明致しました。

これ以外のアイコンは自分でダウンロードして拡張する必要がありますが、大体のアイコンは揃っているのでこの方法で十分だと思います。

また何かブログ作成で感じたことがあれば記事にしたいと思います。それでは。

目次