需求
在CSDN Markdown 编辑器写博客时,想插入一些常用的icon图标,但是没找到对应的CSDN Markdown 编辑器支持的icon图标列表,所以打算自己去找找看。
相关资料
CSDN Markdown 编辑器中icon图标
- 根据CSDN 在线编辑器描述来看,是用的stackedit.io修改而来的,但是根据
stackedit
作者benweet
在StackEdit Icons中的回答来看,stackedit
是支持font demo网页中列出的上百个icon的。但是font demo中的大多icon在CSDN上并不能显示,并且个别能显示的和font demo中的效果并不一样,例如<i class="icon-folder-open"></i>
,所以估计CSDN Markdown 编辑器中的icon server和stackedit.io并不一样。 - 再根据
http://write.blog.csdn.net/mdeditor
这个链接发现,使用到了mdeditor
这个开源在线的Markdown 编辑器,并且在mdeditor官网也能发现CSDN是mdeditor的用户。
暴力测试icon支持列表
- 用Python抓取font demo中所有的icon样式name.
- 将所有的样式name改成
<i class="icon-folder-open"></i>
样式 - 将所有的
<i>
代码粘贴到CSDN编辑器中,查看能够正常显示的icon.
Python脚本抓取所有的icon样式name
#coding:utf-8
import re
from urllib.request import urlopen
from bs4 import BeautifulSoup
html = urlopen("https://stackedit.io/res/libs/fontello/demo.html")
soup = BeautifulSoup(html.read(), "html.parser")
spanSoup = soup.find_all('span', attrs={'class': re.compile("(i-name)")})
for spanTag in spanSoup:
print ("<i class='%s'></i>" %spanTag.string)
结果是:
<i class='icon-pause'></i>
<i class='icon-glass'></i>
<i class='icon-music'></i>
<i class='icon-search'></i>
<i class='icon-mail'></i>
<i class='icon-mail-alt'></i>
<i class='icon-heart'></i>
<i class='icon-heart-empty'></i>
<i class='icon-star'></i>
...
CSDN正常显示的icon样式name
测试日期是2017-12-18 10:03:11 星期一
key | value |
---|---|
icon-picture | |
icon-th-large | |
icon-th | |
icon-folder-open | |
icon-upload | |
icon-help | |
icon-lock | |
icon-lock-open | |
icon-hdd | |
icon-code | |
icon-pencil | |
icon-forward | |
icon-trash | |
icon-italic | |
icon-bold | |
icon-list | |
icon-check | |
icon-check-empty | |
icon-folder | |
icon-spinner | |
icon-chart-bar | |
icon-link | |
icon-file | |
icon-ellipsis-vert |
以上icon在编辑器预览界面是可以正常显示的,但是在博客页面好像无法显示,暂时不清楚原因。