# Genericons
Genericons are vector icons embedded in a webfont designed to be clean and simple keeping with a generic aesthetic.
Use genericons for instant HiDPI, to change icon colors on the fly, or even with CSS effects such as drop-shadows or gradients!
## Usage
To use it, place the `genericons` folder in your stylesheet directory and enqueue the genericons.css file. Now you can create an icon like this:
```
.my-icon:before {
content: '\f101';
font: normal 16px/1 'Genericons';
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
```
This will output a comment icon before every element with the class "my-icon". The `content: '\f101';` part of this CSS is easily copied from the helper tool at http://genericons.com/, or `example.html` in the `font` directory.
You can also use the bundled example.css if you'd rather insert the icons using HTML tags.
## Building your own Genericons
In the `source` directory, you'll find all Genericons source icons in SVG format. This will allow you to bake your own flavor of Genericons using a tool such as FontCustom (http://fontcustom.com) or Fontello (http://fontello.com). Perhaps you need more logos than are available in the base Genericons package? Just add those logos and bake your own expanded set. Maybe you need just a few of the icons Genericons provides, but would like to trim the fat? Remove the ones you won't need!
### FontCustom instructions
FontCustom is a powerful commandline tool which which bakes icon fonts from the SVG source files. It's the tool Genericons is built on, and it provides highly accurate and perfectly crisp icons, *provided all SVGs have the same pixel height*.
It's not that hard to use, and once it's installed you'll never think of icon-fonts the same way again. Seriously, you should try it. Icon fonts for everyone!
1. Install FontCustom. Follow the instructions on the website: http://fontcustom.com/
2. In the `source` directory from the Genericons download, open the file called `fontcustom.yml` in a text editor. Customize the `font_name` and `css_selector`.
3. Open a terminal. Browse to the `source` directory. Type `fontcustom compile`.
You'll now receive a brand new subdirectory called `fontcustom-webfont`. Inside here you'll find your very own flavor of Genericons, with only the icons you want, including a handy example page that'll help you copy/paste the necessary glyphs or CSS values.
*Please note*: In the source directory, there's a hidden file called `.fontcustom-manifest.json`. This file is auto-generated by the FontCustom tool, and holds codepoints (unicode addresses) for every glyph, so its address doesn't change when you add or remove icons. If you feel the need to "start fresh" with the unicode addresses, you should delete this file.
### Fontello instructions
Fontello is very easy to use. Just drop the SVG files of the icons you want onto their website and download the font. The downside is that Fontello seems to ignore the 16px pixelgrid, so you'll end up with fuzzy icons. Buyer beware.
## Notes
**Photoshop mockups**
The `Genericons.ttf` file can be placed in your system fonts folder and used Photoshop or other graphics apps if you like.
If you're using Genericons in your Photoshop mockups, please remember to delete the old version of the font from Font Book, and grab the new one from the zip file. This also affects using it in your webdesigns: if you have an old version of the font installed locally, that's the font that'll be used in your website as well, so if you're missing icons, check for old versions of the font on your system.
**Pixel grid**
Genericons has been designed for a 16x16px grid. That means it'll look sharp at font-size: 16px exactly. It'll also be crisp at multiples thereof, such as 32px or 64px. It'll look reasonably crisp at in-between font sizes such as 24px or 48px, but not quite as crisp as 16 or 32. Please don't set the font-size to 17px, though, that'll just look terrible blurry.
**Antialiasing**
If you keep intact the `-webkit-font-smoothing: antialiased;` and `-moz-osx-font-smoothing: grayscale;` CSS properties. That'll make the icons look their best possible, in Firefox and WebKit based browsers.
**optimizeLegibility**
Note: On Android browsers with version 4.2, 4.3, and probably later, Genericons will simply not show up if you're using the CSS property "text-rendering" set to "optimizeLegibility.
**Updates**
We don't often update icons, but do very carefully when we get good feedback suggesting improvements. Please be mindful if you upgrade, and check that the updated icons behave as you intended.
**Base64 encoding**
By default, Genericons ships with a stylesheet that includes a base64 encoded version of the font. This is to sidestep issues with cross-origin requests for fonts, that happen when a stylesheet loads a font that's stored on a different domain or subdomain. This is very common when using caching plugins.
Base64 encoding comes with a 25% filesize overhead compared to just loading the WOFF file directly. If you know that you won't be loading fonts across domains, or have the ability to edit your server config files to allow it, you can get slightly faster performance by loading Genericons without the base64 encoding. Simply edit `genericons.css` and edit the `@font-face` declaration to match this:
```
@font-face {
font-family: 'Genericons';
src: url('Genericons.woff') format('woff'),
url('Genericons.ttf') format('truetype'),
url('Genericons.svg#genericonsregular') format('svg');
font-weight: normal;
font-style: normal;
}
```
## Changelog
**3.4.1**
* IE8 support restored.
**3.4**
* Updated: Update Google Plus icon to new geometric version. This also *retires* the "alt" version, so *please be mindful if you choose to update, make sure you use the `f206` glyph, not the `f218` glyph, as it no longer exists!
* New: Added helper rotation classes to the base CSS, thanks to geminorum. Apply `genericon-rotate-90` to rotate 90 degrees, -180, -270. Or `genericon-flip-horizontal` or -vertical.
*Again, it is important if you choose to update to this version, make sure you're not using `genericon-googleplus-alt` or unicode character `f218`, as that has been retired! Use `genericon-googleplus` and glyph `f206` instead!*
**3.3.1**
Security Hardening: Remove Genericons example.html file. Please visit genericons.com instead.
**3.3**
The Open Source release.
You can now build your own flavors of Genericons with all the SVGs provided.
**3.2**
A number of new icons and a couple of quick updates.
* New: Activity
* New: HTML anchor
* New: Bug
* New: Download
* New: Handset
* New: Microphone
* New: Minus
* New: Plus
* New: Move
* New: Rating stars, empty, half, full
* New: Shuffle
* New: video camera
* New: Spotify
* New: Twitch
* Update: Fixed geometry in Edit icon
* Update: Updated Foursquare icon
* IE8 bugfix, slipstreamed into this.
Twitch and Spotify mark the last social icons that will be added to Genericons.
Future social icons will have to happen in a separate font.
**3.1**
Genericons is now generated using a commandline tool called FontCustom. This makes it far easier to add new icons to the font, but the switch means the download zip now has a different layout, fonts have different filenames, there's now no .otf font included (but the .ttf should suffice), and the font now has slightly different metrics. I've taken great care to ensure this new version should work as a drop-in replacement, but please be mindful and test carefully if you choose to upgrade.
* Per feedback, the baked-in 16px width and height has been removed from the helper CSS. It wasn't really necessary (the glyph itself has these dimensions naturally), and it caused some headaches.
* Base64 encoding is now included by default in the helper CSS. This makes it drop-in easy to get Genericons working in Firefox even when using a CDN.
* Title attribute on websit
没有合适的资源?快使用搜索试试~ 我知道了~
webpack-wordpress, 使用 web pack和热模块重新加载来构建Wordpress主题.zip
共60个文件
php:23个
js:12个
css:7个
需积分: 12 1 下载量 56 浏览量
2019-10-09
11:50:25
上传
评论
收藏 615KB ZIP 举报
温馨提示
webpack-wordpress, 使用 web pack和热模块重新加载来构建Wordpress主题 web service web service这个项目旨在为WordPress主题开发带来最新工具的最佳特性。 也就是说,这个项目提供了由 web MODULE 提供的热替换功能,允许你开发没有 Having的javascript
资源详情
资源评论
资源推荐
收起资源包目录
webpack-wordpress.zip (60个子文件)
webpack-wordpress-master
.gitignore 571B
README.md 3KB
LICENSE 1KB
webpack-configs
webpack.dev.js 964B
webpack.prod.js 350B
webpack.stage.js 123B
package.json 1KB
awesome-theme
theme-files
css
ie8.css 3KB
ie.css 748B
ie7.css 3KB
editor-style.css 6KB
functions.php 14KB
search.php 1KB
template-parts
content-search.php 1KB
content.php 2KB
content-none.php 1KB
content-single.php 1KB
biography.php 1KB
content-page.php 1KB
footer.php 2KB
index.php 2KB
inc
template-tags.php 8KB
customizer.php 31KB
back-compat.php 2KB
searchform.php 744B
image.php 3KB
screenshot.png 453KB
sidebar.php 390B
single.php 2KB
comments.php 2KB
sidebar-content-bottom.php 794B
rtl.css 13KB
js
keyboard-image-navigation.js 527B
html5.js 10KB
color-scheme-control.js 3KB
functions.js 7KB
customize-preview.js 1KB
skip-link-focus-fix.js 1KB
404.php 879B
readme.txt 3KB
genericons
genericons.css 28KB
README.md 10KB
COPYING.txt 1KB
Genericons.svg 75KB
Genericons.woff 14KB
Genericons.eot 22KB
Genericons.ttf 22KB
LICENSE.txt 18KB
page.php 980B
style.css 68KB
archive.php 2KB
header.php 4KB
index.js 82B
styles
2-base
_base-dir.sass 0B
4-sections
_sections-dir.sass 0B
1-tools
_tools-dir.sass 0B
index.sass 126B
3-elements
_elements-dir.sass 0B
js
dev-env.js 367B
webpack.config.js 1KB
共 60 条
- 1
weixin_38744153
- 粉丝: 346
- 资源: 2万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 《软件测试训练营》学习笔记-举例注册测试用例
- 机器学习预测.rar机器学习预测.rar机器学习预测.rar
- VIS 110Nm lib ip
- 848694479200715布谷鸟配音_1.10.8.0.apk
- 基于改进粒子群算法微电网日前优化(matlab程序)
- Energy Hub Integration: Optimizing Electricity and Heat Market P
- 基于C51单片机蓝牙控制小车proteus仿真程序源码+相关技术文档资料.zip
- Integrated-Energy-Systems-with-CAES-(注释完全,可直接运行)
- PDF为英语文本绘制热区(DEMO)
- Python一种新的需求响应机制DR-VCG研究(注释完全,可直接运行)(文档加Matlab源码)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0