asp.net MVC 隨手筆記 - 使用 Open Iconic 加入圖示

使用 Open Iconic 添加網頁圖示

OPENICONIC 官網 下載圖示壓縮檔

下載並解壓縮後,於 ~/open-iconic-master/font/css 中提取所需的 css 檔案
並將其檔案放置 asp.net MVC ~/Content 資料夾中 (塔克這邊提取的是open-iconic-bootstrap.min.css)
以及 ~/open-iconic-master/font/fonts 中提取所有檔案
並將其檔案放置 asp.net MVC ~/fonts 資料夾中

OPENICONIC 官網 挑選要加入的圖示
並點擊圖示以彈跳出代碼範例

因為塔克提取的是 bootstrap.min.css
所以採用 Bootstrap Icon Font 代碼
並於要顯示的 html 加入代碼 (這邊以 Home Page 為例)

1
2
3
4
5
6
7
8
@{
ViewBag.Title = "Home Page";
}

<div>
<span> Hello World</span>
<span class="oi oi-heart"></span>
</div>

即可顯示圖示

參考
OPENICONIC 官網

Author: Vincent.xie
Link: http://happyhand.github.io/2018/11/22/asp-net-MVC-隨手筆記-使用-Open-Iconic-加入圖示/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.