WordPress极简博客 WordPress极简博客
  • 新鲜事
  • 战疫情
  • UI素材
    • UI素材
    • 电商/节日
    • PPT
      • 节日庆典
      • 工作汇报
      • 商业计划书
    • word
      • 简历竞聘
      • 合同/公文
  • 创客头条
    • 音乐分享
    • 初创文章
    • 极客头条
    • 生活趣事
    • 生活日记
    • 防骗指南
  • 编程教学
    • API日记
    • Linux安全栏目
      • Linux运维安全汇总
      • DDOS攻击防护
      • XSS攻击防护
      • SQL安全防护
    • Python技术栏目
      • Python基础入门
      • Python基础结构
    • WordPress技术栏目
      • WP主题
      • WordPress技术教程
      • RIPRO主题美化
    • WordPress漏洞发布
    • 技术教程汇总
    • 严选源码
  • 专题
  • 基友
  • 隐私
  • 注册
    登录
立即登录
  • 首页
  • 云优化
  • 新疫情
  • 新鲜事
    • 热文
    • 极客
    • 生活
  • 技术篇
    • WP主题
    • 技术教程
    • Python入门
    • Python基础
  • 专题篇
  • 友链君
首页 技术教程(干货) TinyMCE 编辑器添加 FontAwesome 自定义图标按钮

TinyMCE 编辑器添加 FontAwesome 自定义图标按钮

夏柔 2月 2, 2020

你主题必须引用了 FontAwesome 图标库,或者你自己引入,引入方法一为就不介绍了,百度一堆。

/*添加音乐播放器短代码按钮*/
ed.addButton( 'aplayerbox', {
    title : '插入音乐播放器',
    icon: 'music',
    onclick : function() {
        ed.selection.setContent('[music]' + ed.selection.getContent() + '');
    }
});

如上方代码,定义一个icon:music,然后我们再在font-awesome.css文件里添加几行代码,记住后台要引用font-awesome.css文件。

i.mce-i-music:before {   
  content: "\f001"; /*music图标在FontAwesome图标库中的字码点*/
  font-family: FontAwesome;
}

注意上面 css 的格式i.mce-i-js里定义的图标名称:before,然后去 FontAwesome 网站查music图标在图标库中的字码点,下图 Unicode: 后面接的4个字符,写入 CSS 里要记得加“\” 。

TinyMCE 编辑器添加 FontAwesome 自定义图标按钮-WordPress极简博客

就这么简单,去后台刷新缓存看看把。我添加的按钮,都知道是啥不? 

TinyMCE 编辑器添加 FontAwesome 自定义图标按钮-WordPress极简博客
5872621
等 5872621 人赞过
J2dcg1.png
猜你喜欢
  • Nginx添加跨域限制规则
  • 使用测速脚本对国内Linux服务器进行测速
  • 域名爆破之自动化信息收集脚本
  • 利用免费接口实现国家开放大学刷网课脚本
  • RiProV2定制导航条
  • 判断是否在微信浏览器打开
  • 微信内自动播放音频非百度方案
  • 利用veImageX加速您的网站,想不快都难!
  • SWAPIDC减少注册信息及防刷注册量教学
  • Python实现定时发送每日早报及生活指数
04 6月, 2020
美国洛杉矶警察局将对暴力抗议者采取法律行动
夏柔
站长
夏山如碧 - 怀柔天下
1688
文章
25
评论
58145K
获赞
版权声明

文章采用创作共用版权 CC BY-NC-ND/2.5/CN 许可协议,与本站观点无关。

如果您认为本文侵犯了您的版权信息,请与我们联系修正或删除。
投诉邮箱wpsite@aliyun.com

栏目推荐
Python基础入门33
WordPress技术教程267
前沿技术情报所22
城市创新——新消费11
最近有哪些不可错过的热文23
程序员的养生之道0
节
春
  • 新鲜事
  • 疫情实况
  • UI素材
  • 技术教程
  • 音乐分享
  • 专题
  • 友情
  • 隐私
  • 云优化
Copyright © 2019-2025 WordPress极简博客. Designed by 夏柔. 辽公网安备21010502000474号 辽ICP备19017037号-2