PopupMenuを徹底的にアイコンにする
Popup Menuの文字を全てFontAwesomeに変える
違い
UserScriptから追加したボタンもアイコンに出来る
ボタンをたくさん追加しても邪魔にならなくなる
仕切り線は残した
2021-07-11 09:11:04 /programming-notes/PopupMenuのbuttonにFontAwesomeを使うUserCSSの変更を適用した
2021-07-06 FontAwesomeのversionを上げた
style.css/* 標準のtextをすべて消す */
.selections .popup-menu .button-container .button.strong-button > strong,
.selections .popup-menu .button-container .button.italic-button > i,
.selections .popup-menu .button-container .button.strike-button > strike {
display: inline-block;
width: 0;
text-indent: -9999px;
}
.selections .popup-menu .button-container .button.link-button,
.selections .popup-menu .button-container .button.new-page-button,
.selections .popup-menu .button-container .button.copy-plain-button {
font-size: 0;
}
/* buttonにFontAwesomeを使う */
.selections .popup-menu .button-container .button {
font-family: "Open Sans", Helvetica, Arial, "Hiragino Sans", sans-serif, "Font Awesome 5 Free", "Font Awesome 5 Brands";
font-size: 11px;
font-weight: 600;
display: inline-block;
text-align: center;
}
/* iconを設定する */
.selections .popup-menu .button-container .button.link-button::after {
font-size: 11px;
content: '\f0c1'
}
.selections .popup-menu .button-container .button.strong-button::after {
content: '\f032'
}
.selections .popup-menu .button-container .button.italic-button::after {
content: '\f033'
}
.selections .popup-menu .button-container .button.strike-button::after {
content: '\f0cc'
}
.selections .popup-menu .button-container .button.copy-plain-button::after {
font-size: 11px;
content: '\f0c5'
}
.selections .popup-menu .button-container .button.new-page-button::after {
font-size: 11px;
content: '\f0c4'
}
/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }