世界的に爆発的に売れている有料テーマ、「flatsome」のアイコン一覧が無かったので作成しました。

Since there was no icon list of WordPress paid theme “flatsome”, I will explain how to display the icon list.

準備：Wordpressとflatsomeをインストールして有効にする。
Preparation: Install and activate WordPress and flatsome.

(多くのドキュメントがあるのでここでは省略)
(Omitted here because there are many documents)

手順１：新規固定ページを作る
Step1: Add New Page

管理画面にログイン後、固定ページ→新規作成をクリック。

After logging in to the admin page, click the page → Add New.

手順２：カスタムHTMLブロックを追加
Step2：Add “Custom HTML” Block

「＋」アイコンをクリックして、検索欄に「html」と入力すると、「Custom HTML」が表示されるのでクリックして追加。

Click the “+” icon and enter “html” in the search field. “Custom HTML” is displayed. Click to add.

手順３：ブロックのHTML欄の中にHTMLを記入
Step 3: Enter the following HTML in the HTML field of the block

the HTML

<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-lock"></i> &lt;i class="icon-lock"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-user-o"></i> &lt;i class="icon-user-o"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-line"></i> &lt;i class="icon-line"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-chat"></i> &lt;i class="icon-chat"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-user"></i> &lt;i class="icon-user"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-shopping-cart"></i> &lt;i class="icon-shopping-cart"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-tumblr"></i> &lt;i class="icon-tumblr"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-gift"></i> &lt;i class="icon-gift"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-phone"></i> &lt;i class="icon-phone"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-play"></i> &lt;i class="icon-play"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-menu"></i> &lt;i class="icon-menu"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-shopping-basket"></i> &lt;i class="icon-shopping-basket"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-shopping-bag"></i> &lt;i class="icon-shopping-bag"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-google-plus"></i> &lt;i class="icon-google-plus"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-heart-o"></i> &lt;i class="icon-heart-o"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-heart"></i> &lt;i class="icon-heart"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-500px"></i> &lt;i class="icon-500px"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-vk"></i> &lt;i class="icon-vk"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-angle-left"></i> &lt;i class="icon-angle-left"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-angle-right"></i> &lt;i class="icon-angle-right"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-angle-up"></i> &lt;i class="icon-angle-up"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-angle-down"></i> &lt;i class="icon-angle-down"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-twitter"></i> &lt;i class="icon-twitter"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-envelop"></i> &lt;i class="icon-envelop"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-tag"></i> &lt;i class="icon-tag"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-star"></i> &lt;i class="icon-star"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-star-o"></i> &lt;i class="icon-star-o"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-facebook"></i> &lt;i class="icon-facebook"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-feed"></i> &lt;i class="icon-feed"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-checkmark"></i> &lt;i class="icon-checkmark"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-plus"></i> &lt;i class="icon-plus"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-instagram"></i> &lt;i class="icon-instagram"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-pinterest"></i> &lt;i class="icon-pinterest"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-search"></i> &lt;i class="icon-search"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-skype"></i> &lt;i class="icon-skype"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-dribbble"></i> &lt;i class="icon-dribbble"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-certificate"></i> &lt;i class="icon-certificate"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-expand"></i> &lt;i class="icon-expand"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-linkedin"></i> &lt;i class="icon-linkedin"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-map-pin-fill"></i> &lt;i class="icon-map-pin-fill"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-pen-alt-fill"></i> &lt;i class="icon-pen-alt-fill"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-youtube"></i> &lt;i class="icon-youtube"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-flickr"></i> &lt;i class="icon-flickr"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-clock"></i> &lt;i class="icon-clock"&gt;&lt;/i&gt;</span>
<span style="margin:1em;display:inline-block;"><i style="font-size:200%;margin-right:0.25em;" class="icon-snapchat"></i> &lt;i class="icon-snapchat"&gt;&lt;/i&gt;</span>

Screenshot

select HTML mode…

And Copy & Paste the HTML.

手順５：プレビュー画面をクリックする
Step5: Click ”Preview” Button

以上の手順を踏むことで、アイコンのリストを見ることが出来ます！

With the above procedure, you can see a list of icons!

最期まで読んでくれてありがとう！

Thank a lot for reading!