图标（由IcoMoon提供,授权依照 CC BY 3.0）

×

目录导航样式1 样式2 样式3 图标集合

您可以增加自定义CSS: color属性来控制图标的颜色 | font-size属性来控制图标的大小

所有Icon元素都可以使用左侧导航的所有class类进行细节样式的调整

(1) 正常调用图标

正常调用图标

 
HTML代码:

<i class="dsure-icon dsure-icon-home"></i>正常调用图标

(2) 改变了大小并垂直居中的图标

改变了大小并垂直居中的图标

 
HTML代码:

<i class="dsure-icon dsure-icon-home f25 vertical-m"></i> 改变了大小并垂直居中的图标

(3) 使用自定义CSS改变了大小和颜色的图标

使用自定义CSS改变了大小和颜色的图标

 
HTML代码:

<i class="dsure-icon dsure-icon-home" style="color:#39C; font-size:50px;"></i> 使用自定义CSS改变了大小和颜色的图标

(4) 图标集合

<i class="dsure-icon dsure-icon-home"></i>
<i class="dsure-icon dsure-icon-home2"></i>
<i class="dsure-icon dsure-icon-office"></i>
<i class="dsure-icon dsure-icon-profile"></i>
<i class="dsure-icon dsure-icon-newspaper"></i>
<i class="dsure-icon dsure-icon-pencil"></i>
<i class="dsure-icon dsure-icon-pencil2"></i>
<i class="dsure-icon dsure-icon-droplet"></i>
<i class="dsure-icon dsure-icon-paint-format"></i>
<i class="dsure-icon dsure-icon-image"></i>
<i class="dsure-icon dsure-icon-pacman"></i>
<i class="dsure-icon dsure-icon-dice"></i>
<i class="dsure-icon dsure-icon-camera"></i>
<i class="dsure-icon dsure-icon-film"></i>
<i class="dsure-icon dsure-icon-headphones"></i>
<i class="dsure-icon dsure-icon-music"></i>
<i class="dsure-icon dsure-icon-camera2"></i>
<i class="dsure-icon dsure-icon-images"></i>
<i class="dsure-icon dsure-icon-bullhorn"></i>
<i class="dsure-icon dsure-icon-connection"></i>
<i class="dsure-icon dsure-icon-feed"></i>
<i class="dsure-icon dsure-icon-book"></i>
<i class="dsure-icon dsure-icon-books"></i>
<i class="dsure-icon dsure-icon-library"></i>
<i class="dsure-icon dsure-icon-file"></i>
<i class="dsure-icon dsure-icon-file2"></i>
<i class="dsure-icon dsure-icon-file3"></i>
<i class="dsure-icon dsure-icon-file4"></i>
<i class="dsure-icon dsure-icon-qrcode"></i>
<i class="dsure-icon dsure-icon-tags"></i>
<i class="dsure-icon dsure-icon-copy2"></i>
<i class="dsure-icon dsure-icon-paste"></i>
<i class="dsure-icon dsure-icon-paste2"></i>
<i class="dsure-icon dsure-icon-paste3"></i>
<i class="dsure-icon dsure-icon-stack"></i>
<i class="dsure-icon dsure-icon-folder-open"></i>
<i class="dsure-icon dsure-icon-ticket"></i>
<i class="dsure-icon dsure-icon-pushpin"></i>
<i class="dsure-icon dsure-icon-calendar"></i>
<i class="dsure-icon dsure-icon-calendar2"></i>
<i class="dsure-icon dsure-icon-location"></i>
<i class="dsure-icon dsure-icon-cart"></i>
<i class="dsure-icon dsure-icon-location2"></i>
<i class="dsure-icon dsure-icon-print"></i>
<i class="dsure-icon dsure-icon-keyboard"></i>
<i class="dsure-icon dsure-icon-compass"></i>
<i class="dsure-icon dsure-icon-cart3"></i>
<i class="dsure-icon dsure-icon-coin"></i>
<i class="dsure-icon dsure-icon-screen"></i>
<i class="dsure-icon dsure-icon-laptop"></i>
<i class="dsure-icon dsure-icon-credit"></i>
<i class="dsure-icon dsure-icon-calculate"></i>
<i class="dsure-icon dsure-icon-history"></i>
<i class="dsure-icon dsure-icon-mobile"></i>
<i class="dsure-icon dsure-icon-mobile2"></i>
<i class="dsure-icon dsure-icon-clock"></i>
<i class="dsure-icon dsure-icon-support"></i>
<i class="dsure-icon dsure-icon-phone"></i>
<i class="dsure-icon dsure-icon-clock2"></i>
<i class="dsure-icon dsure-icon-tablet"></i>
<i class="dsure-icon dsure-icon-tv"></i>
<i class="dsure-icon dsure-icon-alarm"></i>
<i class="dsure-icon dsure-icon-phone-hang-up"></i>
<i class="dsure-icon dsure-icon-address-book"></i>
<i class="dsure-icon dsure-icon-alarm2"></i>
<i class="dsure-icon dsure-icon-cabinet"></i>
<i class="dsure-icon dsure-icon-bell"></i>
<i class="dsure-icon dsure-icon-notebook"></i>
<i class="dsure-icon dsure-icon-envelope"></i>
<i class="dsure-icon dsure-icon-stopwatch"></i>
<i class="dsure-icon dsure-icon-drawer2"></i>
<i class="dsure-icon dsure-icon-box-add"></i>
<i class="dsure-icon dsure-icon-drawer3"></i>
<i class="dsure-icon dsure-icon-box-remove"></i>
<i class="dsure-icon dsure-icon-download"></i>
<i class="dsure-icon dsure-icon-upload"></i>
<i class="dsure-icon dsure-icon-disk"></i>
<i class="dsure-icon dsure-icon-undo"></i>
<i class="dsure-icon dsure-icon-redo"></i>
<i class="dsure-icon dsure-icon-undo2"></i>
<i class="dsure-icon dsure-icon-redo2"></i>
<i class="dsure-icon dsure-icon-user"></i>
<i class="dsure-icon dsure-icon-users"></i>
<i class="dsure-icon dsure-icon-user2"></i>
<i class="dsure-icon dsure-icon-users2"></i>
<i class="dsure-icon dsure-icon-user3"></i>
<i class="dsure-icon dsure-icon-bubbles"></i>
<i class="dsure-icon dsure-icon-bubbles2"></i>
<i class="dsure-icon dsure-icon-bubble"></i>
<i class="dsure-icon dsure-icon-bubbles3"></i>
<i class="dsure-icon dsure-icon-bubbles4"></i>
<i class="dsure-icon dsure-icon-bubble2"></i>
<i class="dsure-icon dsure-icon-reply"></i>
<i class="dsure-icon dsure-icon-forward"></i>
<i class="dsure-icon dsure-icon-user4"></i>
<i class="dsure-icon dsure-icon-cogs"></i>
<i class="dsure-icon dsure-icon-cog"></i>
<i class="dsure-icon dsure-icon-quotes-left"></i>
<i class="dsure-icon dsure-icon-busy"></i>
<i class="dsure-icon dsure-icon-hammer"></i>
<i class="dsure-icon dsure-icon-wand"></i>
<i class="dsure-icon dsure-icon-key"></i>
<i class="dsure-icon dsure-icon-aid"></i>
<i class="dsure-icon dsure-icon-key2"></i>
<i class="dsure-icon dsure-icon-spinner4"></i>
<i class="dsure-icon dsure-icon-lock"></i>
<i class="dsure-icon dsure-icon-pie"></i>
<i class="dsure-icon dsure-icon-stats"></i>
<i class="dsure-icon dsure-icon-lock2"></i>
<i class="dsure-icon dsure-icon-unlocked"></i>
<i class="dsure-icon dsure-icon-bars"></i>
<i class="dsure-icon dsure-icon-bars2"></i>
<i class="dsure-icon dsure-icon-wrench"></i>
<i class="dsure-icon dsure-icon-binoculars"></i>
<i class="dsure-icon dsure-icon-search"></i>
<i class="dsure-icon dsure-icon-settings"></i>
<i class="dsure-icon dsure-icon-gift"></i>
<i class="dsure-icon dsure-icon-trophy"></i>
<i class="dsure-icon dsure-icon-equalizer"></i>
<i class="dsure-icon dsure-icon-zoom-in"></i>
<i class="dsure-icon dsure-icon-zoom-out"></i>
<i class="dsure-icon dsure-icon-cog2"></i>
<i class="dsure-icon dsure-icon-glass"></i>
<i class="dsure-icon dsure-icon-safari"></i>
<i class="dsure-icon dsure-icon-opera"></i>
<i class="dsure-icon dsure-icon-IE"></i>
<i class="dsure-icon dsure-icon-firefox"></i>
<i class="dsure-icon dsure-icon-css3"></i>
<i class="dsure-icon dsure-icon-html5"></i>
<i class="dsure-icon dsure-icon-html52"></i>
<i class="dsure-icon dsure-icon-paypal3"></i>
<i class="dsure-icon dsure-icon-yelp"></i>
<i class="dsure-icon dsure-icon-libreoffice"></i>
<i class="dsure-icon dsure-icon-file-css"></i>
<i class="dsure-icon dsure-icon-pinterest"></i>
<i class="dsure-icon dsure-icon-pinterest2"></i>
<i class="dsure-icon dsure-icon-tumblr"></i>
<i class="dsure-icon dsure-icon-steam"></i>
<i class="dsure-icon dsure-icon-steam2"></i>
<i class="dsure-icon dsure-icon-yahoo"></i>
<i class="dsure-icon dsure-icon-tux"></i>
<i class="dsure-icon dsure-icon-github"></i>
<i class="dsure-icon dsure-icon-github2"></i>
<i class="dsure-icon dsure-icon-apple"></i>
<i class="dsure-icon dsure-icon-finder"></i>
<i class="dsure-icon dsure-icon-github3"></i>
<i class="dsure-icon dsure-icon-github4"></i>
<i class="dsure-icon dsure-icon-android"></i>
<i class="dsure-icon dsure-icon-windows"></i>
<i class="dsure-icon dsure-icon-github5"></i>
<i class="dsure-icon dsure-icon-wordpress"></i>
<i class="dsure-icon dsure-icon-windows8"></i>
<i class="dsure-icon dsure-icon-wordpress2"></i>
<i class="dsure-icon dsure-icon-joomla"></i>
<i class="dsure-icon dsure-icon-skype"></i>
<i class="dsure-icon dsure-icon-blogger"></i>
<i class="dsure-icon dsure-icon-blogger2"></i>
<i class="dsure-icon dsure-icon-reddit"></i>
<i class="dsure-icon dsure-icon-linkedin"></i>
<i class="dsure-icon dsure-icon-tumblr2"></i>
<i class="dsure-icon dsure-icon-deviantart"></i>
<i class="dsure-icon dsure-icon-deviantart2"></i>
<i class="dsure-icon dsure-icon-forrst"></i>
<i class="dsure-icon dsure-icon-forrst2"></i>
<i class="dsure-icon dsure-icon-dribbble"></i>
<i class="dsure-icon dsure-icon-dribbble2"></i>
<i class="dsure-icon dsure-icon-dribbble3"></i>
<i class="dsure-icon dsure-icon-picassa"></i>
<i class="dsure-icon dsure-icon-picassa2"></i>
<i class="dsure-icon dsure-icon-flickr"></i>
<i class="dsure-icon dsure-icon-flickr2"></i>
<i class="dsure-icon dsure-icon-flickr3"></i>
<i class="dsure-icon dsure-icon-flickr4"></i>
<i class="dsure-icon dsure-icon-instagram"></i>
<i class="dsure-icon dsure-icon-twitter"></i>
<i class="dsure-icon dsure-icon-twitter2"></i>
<i class="dsure-icon dsure-icon-twitter3"></i>
<i class="dsure-icon dsure-icon-feed2"></i>
<i class="dsure-icon dsure-icon-feed3"></i>
<i class="dsure-icon dsure-icon-feed4"></i>
<i class="dsure-icon dsure-icon-youtube2"></i>
<i class="dsure-icon dsure-icon-vimeo2"></i>
<i class="dsure-icon dsure-icon-vimeo"></i>
<i class="dsure-icon dsure-icon-lanyrd"></i>
<i class="dsure-icon dsure-icon-vimeo3"></i>
<i class="dsure-icon dsure-icon-facebook"></i>
<i class="dsure-icon dsure-icon-facebook2"></i>
<i class="dsure-icon dsure-icon-facebook3"></i>
<i class="dsure-icon dsure-icon-google-drive"></i>
<i class="dsure-icon dsure-icon-google-plus"></i>
<i class="dsure-icon dsure-icon-google-plus2"></i>
<i class="dsure-icon dsure-icon-google-plus3"></i>
<i class="dsure-icon dsure-icon-google-plus4"></i>
<i class="dsure-icon dsure-icon-google"></i>
<i class="dsure-icon dsure-icon-mail"></i>
<i class="dsure-icon dsure-icon-mail4"></i>
<i class="dsure-icon dsure-icon-paragraph-justify"></i>
<i class="dsure-icon dsure-icon-paragraph-justify2"></i>
<i class="dsure-icon dsure-icon-indent-increase"></i>
<i class="dsure-icon dsure-icon-indent-decrease"></i>
<i class="dsure-icon dsure-icon-new-tab"></i>
<i class="dsure-icon dsure-icon-code"></i>
<i class="dsure-icon dsure-icon-console"></i>
<i class="dsure-icon dsure-icon-share"></i>
<i class="dsure-icon dsure-icon-table"></i>
<i class="dsure-icon dsure-icon-checkbox-checked"></i>
<i class="dsure-icon dsure-icon-checkbox-unchecked"></i>
<i class="dsure-icon dsure-icon-checkbox-partial"></i>
<i class="dsure-icon dsure-icon-radio-checked"></i>
<i class="dsure-icon dsure-icon-radio-unchecked"></i>
<i class="dsure-icon dsure-icon-scissors"></i>
<i class="dsure-icon dsure-icon-filter"></i>
<i class="dsure-icon dsure-icon-filter2"></i>
<i class="dsure-icon dsure-icon-font"></i>
<i class="dsure-icon dsure-icon-arrow-right"></i>
<i class="dsure-icon dsure-icon-arrow-left"></i>
<i class="dsure-icon dsure-icon-arrow-up-right"></i>
<i class="dsure-icon dsure-icon-arrow-up"></i>
<i class="dsure-icon dsure-icon-arrow-down-left"></i>
<i class="dsure-icon dsure-icon-arrow-down"></i>
<i class="dsure-icon dsure-icon-arrow-up-left"></i>
<i class="dsure-icon dsure-icon-arrow-left2"></i>
<i class="dsure-icon dsure-icon-arrow-down-right"></i>
<i class="dsure-icon dsure-icon-arrow-right2"></i>
<i class="dsure-icon dsure-icon-arrow-down-left2"></i>
<i class="dsure-icon dsure-icon-arrow-down2"></i>
<i class="dsure-icon dsure-icon-arrow-up-right2"></i>
<i class="dsure-icon dsure-icon-arrow-up2"></i>
<i class="dsure-icon dsure-icon-arrow-down-right2"></i>
<i class="dsure-icon dsure-icon-arrow-right3"></i>
<i class="dsure-icon dsure-icon-arrow-up-left2"></i>
<i class="dsure-icon dsure-icon-arrow-left3"></i>
<i class="dsure-icon dsure-icon-arrow-up-right3"></i>
<i class="dsure-icon dsure-icon-arrow-up3"></i>
<i class="dsure-icon dsure-icon-arrow-down-left3"></i>
<i class="dsure-icon dsure-icon-arrow-down3"></i>
<i class="dsure-icon dsure-icon-arrow-up-left3"></i>
<i class="dsure-icon dsure-icon-shuffle"></i>
<i class="dsure-icon dsure-icon-arrow-down-right3"></i>
<i class="dsure-icon dsure-icon-previous"></i>
<i class="dsure-icon dsure-icon-info"></i>
<i class="dsure-icon dsure-icon-sad"></i>
<i class="dsure-icon dsure-icon-info2"></i>
<i class="dsure-icon dsure-icon-next"></i>
<i class="dsure-icon dsure-icon-blocked"></i>
<i class="dsure-icon dsure-icon-eject"></i>
<i class="dsure-icon dsure-icon-cancel-circle"></i>
<i class="dsure-icon dsure-icon-checkmark-circle"></i>
<i class="dsure-icon dsure-icon-volume-medium"></i>
<i class="dsure-icon dsure-icon-spam"></i>
<i class="dsure-icon dsure-icon-point-up"></i>
<i class="dsure-icon dsure-icon-close"></i>
<i class="dsure-icon dsure-icon-play3"></i>
<i class="dsure-icon dsure-icon-volume-mute"></i>
<i class="dsure-icon dsure-icon-volume-mute2"></i>
<i class="dsure-icon dsure-icon-checkmark"></i>
<i class="dsure-icon dsure-icon-point-right"></i>
<i class="dsure-icon dsure-icon-point-down"></i>
<i class="dsure-icon dsure-icon-checkmark2"></i>
<i class="dsure-icon dsure-icon-stop2"></i>
<i class="dsure-icon dsure-icon-point-left"></i>
<i class="dsure-icon dsure-icon-warning"></i>
<i class="dsure-icon dsure-icon-minus"></i>
<i class="dsure-icon dsure-icon-first"></i>
<i class="dsure-icon dsure-icon-plus"></i>
<i class="dsure-icon dsure-icon-notification"></i>
<i class="dsure-icon dsure-icon-question"></i>
<i class="dsure-icon dsure-icon-enter"></i>
<i class="dsure-icon dsure-icon-last"></i>
<i class="dsure-icon dsure-icon-sad2"></i>
<i class="dsure-icon dsure-icon-star"></i>
<i class="dsure-icon dsure-icon-earth"></i>
<i class="dsure-icon dsure-icon-list"></i>
<i class="dsure-icon dsure-icon-globe"></i>
<i class="dsure-icon dsure-icon-star2"></i>
<i class="dsure-icon dsure-icon-contrast"></i>
<i class="dsure-icon dsure-icon-upload2"></i>
<i class="dsure-icon dsure-icon-signup"></i>
<i class="dsure-icon dsure-icon-magnet"></i>
<i class="dsure-icon dsure-icon-lab"></i>
<i class="dsure-icon dsure-icon-power-cord"></i>
<i class="dsure-icon dsure-icon-download2"></i>
<i class="dsure-icon dsure-icon-brightness-contrast"></i>
<i class="dsure-icon dsure-icon-smiley"></i>
<i class="dsure-icon dsure-icon-smiley2"></i>
<i class="dsure-icon dsure-icon-brightness-medium"></i>
<i class="dsure-icon dsure-icon-upload3"></i>
<i class="dsure-icon dsure-icon-switch"></i>
<i class="dsure-icon dsure-icon-hammer2"></i>
<i class="dsure-icon dsure-icon-lightning"></i>
<i class="dsure-icon dsure-icon-download3"></i>
<i class="dsure-icon dsure-icon-bookmarks"></i>
<i class="dsure-icon dsure-icon-happy"></i>
<i class="dsure-icon dsure-icon-happy2"></i>
<i class="dsure-icon dsure-icon-bookmark"></i>
<i class="dsure-icon dsure-icon-cloud-upload"></i>
<i class="dsure-icon dsure-icon-target"></i>
<i class="dsure-icon dsure-icon-cloud-download"></i>
<i class="dsure-icon dsure-icon-eye"></i>
<i class="dsure-icon dsure-icon-thumbs-up"></i>
<i class="dsure-icon dsure-icon-thumbs-up2"></i>
<i class="dsure-icon dsure-icon-eye-blocked"></i>
<i class="dsure-icon dsure-icon-cloud"></i>
<i class="dsure-icon dsure-icon-accessibility"></i>
<i class="dsure-icon dsure-icon-meter"></i>
<i class="dsure-icon dsure-icon-rocket"></i>
<i class="dsure-icon dsure-icon-road"></i>
<i class="dsure-icon dsure-icon-tree"></i>
<i class="dsure-icon dsure-icon-eye2"></i>
<i class="dsure-icon dsure-icon-heart-broken"></i>
<i class="dsure-icon dsure-icon-heart"></i>
<i class="dsure-icon dsure-icon-attachment"></i>
<i class="dsure-icon dsure-icon-menu"></i>
<i class="dsure-icon dsure-icon-truck"></i>
<i class="dsure-icon dsure-icon-leaf"></i>
<i class="dsure-icon dsure-icon-food"></i>
<i class="dsure-icon dsure-icon-airplane"></i>
<i class="dsure-icon dsure-icon-flag"></i>
<i class="dsure-icon dsure-icon-star3"></i>
<i class="dsure-icon dsure-icon-heart2"></i>
<i class="dsure-icon dsure-icon-link"></i>
<i class="dsure-icon dsure-icon-briefcase"></i>
<i class="dsure-icon dsure-icon-mug"></i>
<i class="dsure-icon dsure-icon-play"></i>
<i class="dsure-icon dsure-icon-spades"></i>
<i class="dsure-icon dsure-icon-podcast"></i>
<i class="dsure-icon dsure-icon-spinner6"></i>
<i class="dsure-icon dsure-icon-expand"></i>
<i class="dsure-icon dsure-icon-contract"></i>
<i class="dsure-icon dsure-icon-fire"></i>
<i class="dsure-icon dsure-icon-list2"></i>
<i class="dsure-icon dsure-icon-exit"></i>
<i class="dsure-icon dsure-icon-backward2"></i>
<i class="dsure-icon dsure-icon-forward3"></i>
<i class="dsure-icon dsure-icon-crop"></i>
<i class="dsure-icon dsure-icon-youtube"></i>
<i class="dsure-icon dsure-icon-heart3"></i>
<i class="dsure-icon dsure-icon-lock3"></i>
<i class="dsure-icon dsure-icon-like"></i>
<i class="dsure-icon dsure-icon-t-shirt"></i>
<i class="dsure-icon dsure-icon-fire2"></i>
<i class="dsure-icon dsure-icon-photo"></i>
<i class="dsure-icon dsure-icon-bulb"></i>
<i class="dsure-icon dsure-icon-cloud2"></i>
<i class="dsure-icon dsure-icon-star4"></i>
<i class="dsure-icon dsure-icon-pen2"></i>
<i class="dsure-icon dsure-icon-note"></i>
<i class="dsure-icon dsure-icon-clip"></i>
<i class="dsure-icon dsure-icon-shop"></i>
<i class="dsure-icon dsure-icon-clock3"></i>
<i class="dsure-icon dsure-icon-diamond"></i>
<i class="dsure-icon dsure-icon-tv2"></i>
<i class="dsure-icon dsure-icon-sound"></i>
<i class="dsure-icon dsure-icon-display"></i>
<i class="dsure-icon dsure-icon-paperplane"></i>
<i class="dsure-icon dsure-icon-calendar3"></i>
<i class="dsure-icon dsure-icon-wallet"></i>
<i class="dsure-icon dsure-icon-params"></i>
<i class="dsure-icon dsure-icon-location3"></i>
<i class="dsure-icon dsure-icon-video"></i>
<i class="dsure-icon dsure-icon-trash"></i>
<i class="dsure-icon dsure-icon-eye3"></i>
<i class="dsure-icon dsure-icon-banknote"></i>
<i class="dsure-icon dsure-icon-vynil"></i>
<i class="dsure-icon dsure-icon-truck2"></i>
<i class="dsure-icon dsure-icon-data"></i>
<i class="dsure-icon dsure-icon-bubble3"></i>
<i class="dsure-icon dsure-icon-user5"></i>
<i class="dsure-icon dsure-icon-key3"></i>
<i class="dsure-icon dsure-icon-stack2"></i>
<i class="dsure-icon dsure-icon-music2"></i>
<i class="dsure-icon dsure-icon-megaphone"></i>
<i class="dsure-icon dsure-icon-world"></i>
<i class="dsure-icon dsure-icon-cup"></i>
<i class="dsure-icon dsure-icon-search2"></i>
<i class="dsure-icon dsure-icon-settings2"></i>
<i class="dsure-icon dsure-icon-phone2"></i>
<i class="dsure-icon dsure-icon-study"></i>
<i class="dsure-icon dsure-icon-lab2"></i>
<i class="dsure-icon dsure-icon-news"></i>
<i class="dsure-icon dsure-icon-camera3"></i>
<i class="dsure-icon dsure-icon-tag2"></i>
<i class="dsure-icon dsure-icon-mail5"></i>
<i class="dsure-icon dsure-icon-food2"></i>