PopupMenuを徹底的にアイコンにする
takker.icon用にcustomしたもの
少し高さを低くしてある
code:style.css
/* 標準のtextをすべて消す */
.strong-button > strong, .italic-button > i, .strike-button > strike {
display: inline-block;
width: 0;
text-indent: -9999px;
}
/* これ以上詳細度を削ると、他のruleに上書きされてしまう */
.selections .popup-menu .button-container .button:is(.link-button, .new-page-button, .copy-plain-button) {
font-size: 0;
}
/* buttonにFontAwesomeを使う
*
* .selectionsで入力補完のpopup menuには適用しないようにする
*/
.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;
line-height: 20px;
font-weight: 600;
display: inline-block;
text-align: center;
}
/* iconを設定する */
.link-button::after {
font-size: 11px;
content: '\f0c1'
}
.strong-button::after {
content: '\f032'
}
.italic-button::after {
content: '\f033'
}
.strike-button::after {
content: '\f0cc'
}
.copy-plain-button::after {
font-size: 11px;
content: '\f0c5'
}
.new-page-button::after {
font-size: 11px;
content: '\f0c4'
}