ピンしたページのスタイル

code:style.css

.grid li.page-list-item a .pin { background-color: transparent; background-image: none }

.grid li.page-list-item a .pin::after {

content: '\f08d'; font-family: 'Font Awesome 5 Free'; font-weight: 900;

font-size: 20px; color: #A45AFF; bottom: 0 }

Font Awesome フィーバーが続いてるので、とりあえずピン留めマークを変えてみたよ。

こうなった。

https://gyazo.com/c82fed3de5d439efb85f905d53adc5e1

デフォルトはこう🐶

https://gyazo.com/01d63faac7aeb6aafefcf7a2811f7a5d

Scrapboxの使い勝手そのものには影響しないんだけど、こういうのも楽しいよね～！

違うアイコンを使いたいとき

Font Awesome のアイコンページから気になるアイコンをクリックして、

Unicode: ほにゃららってところからほにゃららをコピーして、

上のCSSの中の content: '\f08d' を content: '\ほにゃらら'に変えればおっけー。

https://gyazo.com/ed5c2ac751d3401f406518774a557a66

アイコンを傾けたいとき

code:style.css

.grid li.page-list-item a .pin { background-color: transparent; background-image: none }

.grid li.page-list-item a .pin::after {

content: '\f08d'; font-family: 'FontAwesome'; font-size: 20px; color: #A45AFF; bottom: 0;

diplay: inline-block; transform: rotate(35deg) }

最後の行が35度傾ける指定です。

ピンのアイコンだとこのほうがしっくりくるな～。

https://gyazo.com/014c31ecd004d989c0ccaeb2122c933d

初出 2017-09-16

2017-09-17 「アイコンを傾けたいとき」を追記

2021-07-06 Font Awesome のアップデートに対応