Quartoでアイコンを挿入したい

はじめに

Quartoを使ってHTMLファイルを作成していると、時々アイコンを入れたい場合が出てきます。

例えばソースコードを提示したいとき、「コード」としたいわけです。

これはQuartoの拡張機能を使うことでできるようになります。

今回は導入方法と記述方法を簡潔にまとめます。

拡張機能

インストール

使用するのは主に2つ、Font AwsomeとIconifyです。Font Awsomeだけでもほとんど困ることはありませんが、Iconifyも使うとFont Awsomeの不足をだいぶ補完することができると思います。

詳しくは以下のGitHubページを見てください。

Font Awsome

Iconify

まず、VSCodeなりRStudioなりでプロジェクトを作成して下さい¹ ²。

次にVSCodeではCtrl + Jでターミナルを開き、RStudioではConsole横のTerminalパネルを開いて、以下を打ち込みます。

# Font Awsome
quarto add quarto-ext/fontawesome

# Iconify
quarto add mcanouil/quarto-iconify

途中Yes/Noなど聞かれるかもしれませんが、全部Yesで大丈夫です。

準備はこれだけです。

書く

書き方は、以下です。本文に直接入れてください。

Font Awsomeの場合
{{< fa pen-to-square >}}

Iconifyの場合
{{< iconify lucide:square-pen >}}

やが出力されます。

書き方の注意として、まず、{{< fa >}}や{{< iconify >}}の部分に任意性はありません。ここは必ず上の通り書いてください。また、スペースがあることにも注意してください。

アイコンの種類は、以下のページから探し、アイコンの名前をコピペすればOKです。

Font Awsome 一覧

Iconify 一覧

僕は基本Font Awsomeで探し、なければIconifyも見てみる、という方針でいつも使っています。使いやすさはほぼ同じだと思うので、いろいろ見比べてみてください。

注意点

細かい点は上で出したGitHubページを見てほしいのですが、よく使うブランドアイコンについての注意点をここでは述べます。

例えばGitHubやXなどブランドのアイコンを使う際には、アイコン名の前にbrandsと入れる必要があります。

{{< fa brands github >}}を見てみてください。

とすると、

を見てみて下さい。

と出力されます。

Twitterはtwitter、Xはx-twitter、Rはr-projectです。いろいろ調べて試してみてください。

おわりに

今回はFont AwsomeとIconifyを使ったアイコンの挿入方法をご紹介しました。

ウェブサイトを作る際にも重宝します。上手に使ってデザイン性を高めていきましょう

注

Rのプロジェクトについてはこちらを参照してください。↩︎
VSCodeでは画面上部「フォルダ」→「フォルダーを開く」で作業フォルダを開く、RStudioではワーキングディレクトリを設定するだけでもできるかもしれませんが、僕はやったことないのでご了承ください。↩︎

--- title: "Quartoでアイコンを挿入したい" description: | QuartoのHTML出力でアイコンを挿入する方法を紹介します。 date: 2024-12-01 categories: - Quarto - VSCode - RStudio - 備忘録 editor: visual --- ## はじめに Quartoを使ってHTMLファイルを作成していると、時々アイコンを入れたい場合が出てきます。例えばソースコードを提示したいとき、「{{< fa code >}}コード」としたいわけです。これはQuartoの拡張機能を使うことでできるようになります。今回は導入方法と記述方法を簡潔にまとめます。 ## 拡張機能 ### インストール {#install} 使用するのは主に2つ、**Font Awsome**と**Iconify**です。Font Awsomeだけでもほとんど困ることはありませんが、Iconifyも使うとFont Awsomeの不足をだいぶ補完することができると思います。詳しくは以下のGitHubページを見てください。 ::: {.callout-tip appearance="minimal"} [Font Awsome](https://github.com/quarto-ext/fontawesome) ::: ::: {.callout-tip appearance="minimal"} [Iconify](https://github.com/mcanouil/quarto-iconify) ::: まず、VSCodeなりRStudioなりでプロジェクトを作成して下さい[^1][^2]。 [^1]: Rのプロジェクトについては[こちら](../240515_rproj/index.html)を参照してください。 [^2]: VSCodeでは画面上部「フォルダ」→「フォルダーを開く」で作業フォルダを開く、RStudioではワーキングディレクトリを設定するだけでもできるかもしれませんが、僕はやったことないのでご了承ください。次にVSCodeでは`Ctrl` + `J`でターミナルを開き、RStudioではConsole横のTerminalパネルを開いて、以下を打ち込みます。 ``` default # Font Awsome quarto add quarto-ext/fontawesome # Iconify quarto add mcanouil/quarto-iconify ``` 途中Yes/Noなど聞かれるかもしれませんが、全部Yesで大丈夫です。準備はこれだけです。 ### {{< fa pen-to-square >}} 書く書き方は、以下です。本文に直接入れてください。 ``` {.markdown shortcodes="false"} Font Awsomeの場合 {{< fa pen-to-square >}} Iconifyの場合 {{< iconify lucide:square-pen >}} ``` {{< fa pen-to-square >}}や{{< iconify lucide:square-pen >}}が出力されます。書き方の注意として、まず、{{{< fa >}}}や{{{< iconify >}}}の部分に任意性はありません。ここは必ず上の通り書いてください。また、スペースがあることにも注意してください。アイコンの種類は、以下のページから探し、アイコンの名前をコピペすればOKです。 ::: {.callout-tip appearance="minimal"} [Font Awsome 一覧](https://fontawesome.com/search?m=free) ::: ::: {.callout-tip appearance="minimal"} [Iconify 一覧](https://icon-sets.iconify.design/) ::: 僕は基本Font Awsomeで探し、なければIconifyも見てみる、という方針でいつも使っています。使いやすさはほぼ同じだと思うので、いろいろ見比べてみてください。 ### 注意点細かい点は[上](#install)で出したGitHubページを見てほしいのですが、よく使うブランドアイコンについての注意点をここでは述べます。例えばGitHubやXなどブランドのアイコンを使う際には、アイコン名の前に`brands`と入れる必要があります。 ``` {.markdown shortcodes="false"} {{< fa brands github >}}を見てみてください。 ``` とすると、 {{< fa brands github >}}を見てみて下さい。と出力されます。 Twitterは`twitter`、Xは`x-twitter`、Rは`r-project`です。いろいろ調べて試してみてください。 ## おわりに今回はFont AwsomeとIconifyを使ったアイコンの挿入方法をご紹介しました。ウェブサイトを作る際にも重宝します。上手に使ってデザイン性を高めていきましょう{{< fa champagne-glasses >}}