qwe001 qwe001 - 2 months ago 35
CSS Question

How to use FontAwesome Icon on TinyMCE?

I know a way to fontsize-change implement like this.

<script type="text/javascript" src="/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector : 'textarea',
toolbar : 'fontsizeselect',
});
</script>

<textarea name="aaa"></textarea>


That generate text menu

<span class="mce-txt">Font Sizes</span>


enter image description here

But I dont like it. I wanna change this text to icon like this.

enter image description here

I have been searched tinymce all icon, but there are no font-icon.

enter image description here

So I think this solution is use FontAwesome.

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
span.mce-txt:before {
content: "\f301";
font-family: FontAwesome;
}
</style>


But that is not show. just display "." only.

How can I use FontAwesome Icon?

Answer

I solved this. I take 2 mistakes.

First, content value is "\f031", not "\f301". Second, font-family not apply so I use !important

This may works.

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
span.mce-txt:before {
    content: "\f031";
    font-family: FontAwesome !important;
}
</style>