[[Obsidian Publish]]のCSSで、アイコンを変更する方法は次のとおり。 ## やりたいこと まず、[[Minerva]]を参考にし、[[Obsidian]]のノートに[[🧰Propertiesに作成日・更新日を追加するスクリプトの調整#関連メモ・リンク|Propertisを追加するスクリプト]]を導入し、[[🧰Propertiesに作成日・更新日を追加するスクリプトの調整]]をおこなった。 さらに、[[Obsidian Publish]]で公開しているページの右上に、ノートのプロパティにもとづいて作成日と更新日を表示できるようにした。  <span class="mxt-caption"> ▲ ノートのプロパティを利用して作成日と更新日を表示</span> ここで表示されているアイコンを変更する手順は下記の通り。 ## アイコンを探す アイコンを探す。たとえば[[Font Awasome]]。 右上の`Download SVG File`からアイコンのSVGファイルをダウンロードする。  <span class="mxt-caption"> ▲ Font AwasomeからSVGファイルをローカルにダウンロード</span> ## アイコンデータの変換 ダウンロードしたSVGファイルをテキストエディタなどで開く。 `<svg xmins ....></svg>`をbase64にエンコードする。 たとえば、[Base64 Encode and Decode](https://www.base64encode.org/)を利用。  <span class="mxt-caption"> ▲ Base64 Encode and DecodeでSVGをbase64にエンコード</span> - `height`と`width`はここで指定したものが引き継がれるので==書き換えておく== - `ENCODE`ボタン押下→`Copy to clipboard` ## CSSにはりつける `publish.css`の`content: url("data:image/svg+xml;base64`のあとに、コピーしたものを貼る。 ```css .properties > .created::before { display: inline-block; filter: invert(0.4) hue-rotate(180deg); width: 14px; content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov...（中略）...LTE2IDE2eiIvPjwvc3ZnPg=="); margin-right: 5px; position: absolute; top: 50%; left: 7px; transform: translateY(-40%); } ```