I am attempting to create a custom styled list that is editable with tinymce. The list-items are using Material-Check-Icons as bullet-points, which are added as css-pseudo-elements ::before. This setup works well, but when I integrate tinymce (v5) into the list for editing purposes, the icons disappear. How can I display the list-icons within the tinymce content?
...I have already attempted to include the material-icon-library in the content_css.
<div id="editable">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
tinymce.init({
selector: '#editable',
inline: true,
content_css: ['https://fonts.googleapis.com/icon?family=Material+Icons']
})
#editable ul{
padding-left: 0;
list-style-type: none;
}
#editable ul>li {
padding-left: 25px;
margin-top: 10px;
position: relative;
}
#editable ul>li:before {
content: "check";
font-family: Material Icons;
position: absolute;
left: 0;
top: -2px;
font-size: 17px;
color: #3770d6;
}
For reference, here is a codepen link.