【CSS3】CSS3图标集锦
200个纯CSS3写的图标 支持复制代码http://www.uiplayground.in/css3-icons/
CSS3神器实现ico小图标
http://www.w3cfuns.com/forum.php ... 5596008&from=portal
据说阿里巴巴推出的矢量图标库
http://www.Iconfont.cn
Font Awesome可缩放的矢量图标
您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
http://fontawesome.dashgame.com/
参考手册：
http://www.runoob.com/font-awesome/fontawesome-reference.html
https://icons8.com/
[*]Iconic
[*]Octicons
[*]Bytesize
[*]Google Material icons
[*]Ionicons
[*]Feather
[*]Dripicons
[*]Ikons
[*]Glyph
https://icomoon.io/app/#/select
https://www.flaticon.com/
130个白色图标集纯CSS调用极简
https://saeedalipoor.github.io/icono/使用方法首先你需要将 icono.min.css 文件加入到HTML文档的头部。<link href="css/icono.min.css" rel="stylesheet">
或者CSS文件头部加上
@import url(icono.min.css);
然后可以在任意的html标签上添加所需要的图标的class。
<i class="icono-mail"></i>
<div class="icono-mail"></div>
<span class="icono-mail"></span>
<whatever class="icono-mail"></whatever>
你可以通过元素的样式来改变图标的颜色(默认为白色)：<i class="icono-mail heart"></i>
i.heart{color: red;}
你可以通过以下脚本实现图标缩放
transform:scale(2);//设置缩放比例
-ms-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
-moz-transform:scale(2);
所有可用的图标class：
[*]icono-home
[*]icono-mail
[*]icono-rss
[*]icono-hamburger
[*]icono-plus
[*]icono-cross
[*]icono-check
[*]icono-power
[*]icono-heart
[*]icono-infinity
[*]icono-flag
[*]icono-file
[*]icono-image
[*]icono-video
[*]icono-music
[*]icono-headphone
[*]icono-document
[*]icono-folder
[*]icono-pin
[*]icono-smile
[*]icono-eye
[*]icono-sliders
[*]icono-share
[*]icono-sync
[*]icono-reset
[*]icono-gear
[*]icono-signIn
[*]icono-signOut
[*]icono-support
[*]icono-dropper
[*]icono-tiles
[*]icono-list
[*]icono-chain
[*]icono-youtube
[*]icono-rename
[*]icono-search
[*]icono-book
[*]icono-forbidden
[*]icono-trash
[*]icono-keyboard
[*]icono-mouse
[*]icono-user
[*]icono-crop
[*]icono-display
[*]icono-imac
[*]icono-iphone
[*]icono-macbook
[*]icono-imacBold
[*]icono-iphoneBold
[*]icono-macbookBold
[*]icono-nexus
[*]icono-microphone
[*]icono-asterisk
[*]icono-terminal
[*]icono-paperClip
[*]icono-market
[*]icono-clock
[*]icono-textAlignRight
[*]icono-textAlignCenter
[*]icono-textAlignLeft
[*]icono-indent
[*]icono-outdent
[*]icono-frown
[*]icono-meh
[*]icono-locationArrow
[*]icono-plusCircle
[*]icono-checkCircle
[*]icono-crossCircle
[*]icono-exclamation
[*]icono-exclamationCircle
[*]icono-comment
[*]icono-commentEmpty
[*]icono-areaChart
[*]icono-pieChart
[*]icono-barChart
[*]icono-bookmark
[*]icono-bookmarkEmpty
[*]icono-filter
[*]icono-volume
[*]icono-volumeLow
[*]icono-volumeMedium
[*]icono-volumeHigh
[*]icono-volumeDecrease
[*]icono-volumeIncrease
[*]icono-volumeMute
[*]icono-tag
[*]icono-calendar
[*]icono-camera
[*]icono-piano
[*]icono-ruler
需要CSS库加群联系，调用时只需调用相应的Class值即可。
模板：mstjs/include/icono.min.css
ICONO 纯 CSS 绘制的一套图标库
ICONO是一套使用CSS 绘制的图标库。 优点是不包含任何其他依赖，体积较小min+gzip后只有 7kb，包含137个图标，但是CSS图标的缺点也很明显，不能像字体图标一样那么简单就能修改图标大小。CSS绘制的图标，修改大小只能通过一些其他的方式，我是用 CSS3 的 transform:scale(0.5)来进行图标的大小修改。我使用ICONO作为我博客前端的图标库使用。这里整理了一个 class 对应的图标表，方便自己使用这些图标。
实现图标的调用：
测试平台：http://www.w3school.com.cn/tiy/t.asp两种方法，都很简单，欢迎提供第三种方案。
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<style>
p:before {
content: "\f292";
font-family: FontAwesome;
}
</style>
<body>
<p>更简洁的方法</p>
<span><i class="fa fa-chrome"></i>需要辅助的方法</span>
</body>
</html>
页:
[1]