Home forums [SOLVED] adding a custom icon to a tinyMCE button

  • This topic is empty.
Viewing 0 reply threads
  • Author
    Posts
    • #4489 Reply
      finderpress
      Keymaster

      I’m trying to add a Font-Awsome icon to a button I added to tinyMCE thus:

      ed.addButton('youtube', {
      title: 'Add Video' ,
      icon: 'icon-youtube',
      onclick: function () {
      //do stuff here...
      }

      using an image like the docs suggest was not acceptable but for some reason I am not able to make this work. any ideas?

      this CSS based solution seems to work nicely:

      i.mce-i-[FONT-AWESOME-CLASSNAME]:before {   // FONT-AWESOME-CLASSNAME e.g. "icon-youtube"
      content: "[FONT-AWESOME-CONTENT]"; // FONT-AWESOME-CONTENT e.g. "f166"
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      text-decoration: inherit;
      color: #000;
      font-size: 1.5em;
      padding-right: 0.5em;
      position: absolute;
      top: 15%;
      left: 0;
      }

      it is based on matt-royal’s answer on this stack exchange wordpress thread

      Answered By — Kepedizer

      Answer Checked By — Marilyn (FixIt Volunteer)

      This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Viewing 0 reply threads
Reply To: [SOLVED] adding a custom icon to a tinyMCE button
Your information:




FREE CHEAT SHEET

Learn How to build a brand online and build authority 

This free (and highly detailed) cheat sheet will give you 20 smart strategies to help you grow your brand

No thanks, I don't want to build brand