CSDNmarkdownicon图标
需求
在CSDN Markdown 编辑器写博客时,想插⼊⼀些常⽤的icon图标,但是没到对应的CSDN Markdown 编辑器⽀持的icon图标列表,所以打算⾃⼰去看。
相关资料
CSDN Markdown 编辑器中icon图标
icon图标库根据描述来看,是⽤的修改⽽来的,但是根据stackedit 作者benweet在中的回答来看,stackedit是⽀持⽹页中列出的上百个icon的。但是中的⼤多icon在CSDN上并不能显⽰,并且个别能显⽰的和中的效果并不⼀样,例如<i class="icon-folder-open"></i>,所以估计CSDN Markdown 编辑器中的icon server和并不⼀样。
再根据write.blog.csdn/mdeditor这个链接发现,使⽤到了mdeditor这个开源在线的Markdown 编辑器,并且在官⽹也能发现CSDN是的⽤户。
暴⼒测试icon⽀持列表
1. ⽤Python抓取中所有的icon样式name.
2. 将所有的样式name改成<i class="icon-folder-open"></i>样式
3. 将所有的<i>代码粘贴到CSDN编辑器中,查看能够正常显⽰的icon.
Python脚本抓取所有的icon样式name
#coding:utf-8
import re
quest import urlopen
from bs4 import BeautifulSoup
html = urlopen("stackedit.io/res/libs/fontello/demo.html")
soup = ad(), "html.parser")
spanSoup = soup.find_all('span', attrs={'class': repile("(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在编辑器预览界⾯是可以正常显⽰的,但是在博客页⾯好像⽆法显⽰,暂时不清楚原因。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。