Iconfont使用起来很简单,打开它的首页,你会发现很多图标,点击你需要的图标,就会发现图标到了右上角的购物车里,选择好了图标之后,点击购物车,即可下载下来一个 zip 包。 解压之后,会出现:demo.html,iconfont.eot,iconfont.svg,iconfont.ttf,iconfont.woff这几个文件。 其中demo.html文件是使用说明和效果,另外四个就...
针对HTML 里的图片可以利用Piturefill.js来做自适应。 使用矢量化图形,包括 icon fonts SVG 这一期我们主要来讲讲 icon fonts 的应用。 什么是 icon fonts? 利用字体工具把我们平时 Web 上用的图形图标(icons)转换成 web fonts,就成了 icon fonts,它可以借助 CSS 的 @font-face 嵌入到网页里,用以显示 icons。
[data-icon]:before { font-family: icons; /* BYO icon font, mapped smartly */ content: attr(data-icon); speak: none; /* Not to be trusted, but hey. */ } 单独图标: <a href="#" class="icon-alone"> <span aria-hidden="true" data-icon=" "></span> <span class="screen-reader...
fa fa-fonticons  尝试一下 fa fa-fort-awesome  尝试一下 fa fa-forumbee  尝试一下 fa fa-forward  尝试一下 fa fa-foursquare  尝试一下 fa fa-free-code-camp  尝试一下 fa fa-frown-o  尝试一下 fa fa-futbol-o &#...
HTML实例 Inline Icons Place Font Awesome icons just about anywhere with the<i>tag. icon-camera-retro <i class="icon-camera-retro"></i> icon-camera-retro Icon classes are echoed via CSS :before. 更大的图标 通过给图标设置icon-large、icon-2x、icon-3x或icon-4x样式,可以让图标相对于它所在的...
font-family: icons; /* BYO icon font, mapped smartly */ content: attr(data-icon); speak: none; /* Not to be trusted, but hey. */ } Holy cow that’s easy eh? Notice we aren’t using a specific class name for the icon (e.g. like .icon-stats or something), we’re using ad...
在HTML的 <head> 中引用font-awesome.min.css。 <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 参考示例,然后开始使用Font Awesome吧! 简单方式之二:LESS Ruby Gem 使用官方Font Awesome LESS Ruby Gem 可以简单方便的将 Font Awesome LESS 集成到Rails项目中。由 @super...
优雅的字体图标(Elegant-Font-icons) 294款 十字架(cross) 优雅的字体图标(Elegant-Font-icons) 294款 文件夹字体图标(Folder Fonts icon) 丰满的图标(Plump-icons) 82款 螺丝起子(screwdriver) 优雅的字体图标(Elegant-Font-icons) 294款 刷新(refresh) 字体可怕的图标(Font-Awesome-icons) ...
Why do I have to pay for Font Awesome icons now? How do I add more seats to my Font Awesome Pro license? The Pro License What does a Font Awesome Pro License get me? What can't I do with a Font Awesome Pro License? What can I do with a Font Awesome Pro license? What...
/* you can be more comfortable with increased icons size *//* font-size: 120%; *//* Font smoothing. That was taken from TWBS */-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;/* Uncomment for 3D effect *//* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3...