Blazor中内置的Open Iconic图标集

新建一个Blazor项目，然后在index.razor中输入以下代码

<div class="row">@foreach (string s in list){<div class="col-lg-3"><span class="oi @s" aria-hidden="true"></span> @s</div>}
</div>
@code{static readonly string[] list = new string[] { "oi-account-login", "oi-account-logout", "oi-action-redo", "oi-action-undo", "oi-align-center", "oi-align-left", "oi-align-right", "oi-aperture", "oi-arrow-bottom", "oi-arrow-circle-bottom", "oi-arrow-circle-left", "oi-arrow-circle-right", "oi-arrow-circle-top", "oi-arrow-left", "oi-arrow-right", "oi-arrow-thick-bottom", "oi-arrow-thick-left", "oi-arrow-thick-right", "oi-arrow-thick-top", "oi-arrow-top", "oi-audio-spectrum", "oi-audio", "oi-badge", "oi-ban", "oi-bar-chart", "oi-basket", "oi-battery-empty", "oi-battery-full", "oi-beaker", "oi-bell", "oi-bluetooth", "oi-bold", "oi-bolt", "oi-book", "oi-bookmark", "oi-box", "oi-briefcase", "oi-british-pound", "oi-browser", "oi-brush", "oi-bug", "oi-bullhorn", "oi-calculator", "oi-calendar", "oi-camera-slr", "oi-caret-bottom", "oi-caret-left", "oi-caret-right", "oi-caret-top", "oi-cart", "oi-chat", "oi-check", "oi-chevron-bottom", "oi-chevron-left", "oi-chevron-right", "oi-chevron-top", "oi-circle-check", "oi-circle-x", "oi-clipboard", "oi-clock", "oi-cloud-download", "oi-cloud-upload", "oi-cloud", "oi-cloudy", "oi-code", "oi-cog", "oi-collapse-down", "oi-collapse-left", "oi-collapse-right", "oi-collapse-up", "oi-command", "oi-comment-square", "oi-compass", "oi-contrast", "oi-copywriting", "oi-credit-card", "oi-crop", "oi-dashboard", "oi-data-transfer-download", "oi-data-transfer-upload", "oi-delete", "oi-dial", "oi-document", "oi-dollar", "oi-double-quote-sans-left", "oi-double-quote-sans-right", "oi-double-quote-serif-left", "oi-double-quote-serif-right", "oi-droplet", "oi-eject", "oi-elevator", "oi-ellipses", "oi-envelope-closed", "oi-envelope-open", "oi-euro", "oi-excerpt", "oi-expand-down", "oi-expand-left", "oi-expand-right", "oi-expand-up", "oi-external-link", "oi-eye", "oi-eyedropper", "oi-file", "oi-fire", "oi-flag", "oi-flash", "oi-folder", "oi-fork", "oi-fullscreen-enter", "oi-fullscreen-exit", "oi-globe", "oi-graph", "oi-grid-four-up", "oi-grid-three-up", "oi-grid-two-up", "oi-hard-drive", "oi-header", "oi-headphones", "oi-heart", "oi-home", "oi-image", "oi-inbox", "oi-infinity", "oi-info", "oi-italic", "oi-justify-center", "oi-justify-left", "oi-justify-right", "oi-key", "oi-laptop", "oi-layers", "oi-lightbulb", "oi-link-broken", "oi-link-intact", "oi-list-rich", "oi-list", "oi-location", "oi-lock-locked", "oi-lock-unlocked", "oi-loop-circular", "oi-loop-square", "oi-loop", "oi-magnifying-glass", "oi-map-marker", "oi-map", "oi-media-pause", "oi-media-play", "oi-media-record", "oi-media-skip-backward", "oi-media-skip-forward", "oi-media-step-backward", "oi-media-step-forward", "oi-media-stop", "oi-medical-cross", "oi-menu", "oi-microphone", "oi-minus", "oi-monitor", "oi-moon", "oi-move", "oi-musical-note", "oi-paperclip", "oi-pencil", "oi-people", "oi-person", "oi-phone", "oi-pie-chart", "oi-pin", "oi-play-circle", "oi-plus", "oi-power-standby", "oi-print", "oi-project", "oi-pulse", "oi-puzzle-piece", "oi-question-mark", "oi-rain", "oi-random", "oi-reload", "oi-resize-both", "oi-resize-height", "oi-resize-width", "oi-rss-alt", "oi-rss", "oi-script", "oi-share-boxed", "oi-share", "oi-shield", "oi-signal", "oi-signpost", "oi-sort-ascending", "oi-sort-descending", "oi-spreadsheet", "oi-star", "oi-sun", "oi-tablet", "oi-tag", "oi-tags", "oi-target", "oi-task", "oi-terminal", "oi-text", "oi-thumb-down", "oi-thumb-up", "oi-timer", "oi-transfer", "oi-trash", "oi-underline", "oi-vertical-align-bottom", "oi-vertical-align-center", "oi-vertical-align-top", "oi-video", "oi-volume-high", "oi-volume-low", "oi-volume-off", "oi-warning", "oi-wifi", "oi-wrench", "oi-x", "oi-yen", "oi-zoom-in", "oi-zoom-out" };
}

即可获得所有内置的图标清单，共223个图标

图标使用方法：参考NavMenu.razor内容

 <span class="oi oi-home" aria-hidden="true"></span> Home

Blazor中内置的Open Iconic图标集相关推荐

win10中内置的Linux Bash启动闪退问题
win10中内置的Linux Bash启动闪退问题详情请参考:http://blog.csdn.net/wangzl1163/article/details/61414872 posted on 2 ...
【Python】Python中内置的%操作符
Python中内置的%操作符可用于格式化字符串操作,控制字符串的呈现格式.Python中还有其他的格式化字符串的方式,但%操作符的使用是最方便的. 格式符为真实值预留位置,并控制显示的格式.格式符可以 ...
python对文件操作的相关函数_python文件操作的相关函数深入理解Django中内置的用户认证...
前言本文主要给大家介绍了关于Django中内置用户认证的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 认证登陆在进行用户登陆验证的时候,如果是自己写代码,就必须要先查 ...
java自带函数_java8中内置的四大核心函数式接口
java8中内置的四大核心函数式接口 Consumer:消费型接口 void accept(T t) //Consumer 消费型接口 public void happy(double money, ...
javaScript中内置对象Date基本操作入门
Date基础语法 /*** Date** 1970年1月1日(UTC)起经过的毫秒数.** 语法* new Date();* new Date(value);* new Date(dateString ...
MATLAB中内置的BP神经网络函数 help newff翻译【学习笔记】
MATLAB中内置的BP神经网络函数 help翻译原文请参考:help newff newff 创建前馈反向传播网络. 在 R2010b NNET 7.0 中已过时. 最后在 R2010a NNET ...
在unity中内置一个查询物流信息功能
项目需求,在unity中内置查询物流信息的功能需要用到查询物流的API 在这选择的是快递100的API 首先需要申请快递100的API,官方会给你一个KEY,使用该KEY,就可以进行物流查询了 u ...
Tornado-02-Tornado、路由进阶、视图进阶（视图中内置的钩子方法、视图方法调用顺序、冲刷缓存、用户认证）、模板语法（基本语法、内置标签或函数）
Tornado 一.路由进阶路由语法和参数在路由列表的路由成员中,我们一共可以设置4个参数 url(r"/uri路径", 视图类, {"参数名":" ...
CorelDRAW中内置的视频教程在哪里？
CorelDRAW中内置了很多教学内容和视频教程,可以帮助用户快速学习和掌握CorelDRAW的使用方法,创作出个性化的作品.很多小伙伴表示找不到软件自带学习视频,现在小编就来告诉你. 用户可以通过两 ...

Blazor中内置的Open Iconic图标集

Blazor中内置的Open Iconic图标集

Blazor中内置的Open Iconic图标集相关推荐

最新文章

热门文章