需求

在CSDN Markdown 編輯器寫博客時，想插入一些常用的icon圖標，但是沒找到對應的CSDN Markdown 編輯器支持的icon圖標列表，所以打算自己去找找看。

相關資料

• CSDN 在線編輯器
• 開源在線 Markdown 編輯器
• stackedit.io
• stackedit.io github
• fontawesome.io

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 BeautifulSouphtml = 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 星期一 keyvalue

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在編輯器預覽界面是可以正常顯示的，但是在博客頁面好像無法顯示，暫時不清楚原因。

總結

以上是生活随笔為你收集整理的CSDN markdown icon 图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。