Skip to content

Commit

Permalink
Added description of using FontAwesome icons to readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@IanLunn
IanLunn committed Jan 6, 2015
1 parent 91484b9 commit 27e33d1
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 29 deletions.
90 changes: 63 additions & 27 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
# hover.css
# Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.

[Demo](http://ianlunn.github.io/Hover) |
[Tutorial](http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/)

## How To Use
hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd like it applied to.
Hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd like it applied to.

###Copy and Paste an Effect
If you plan on only using one or several effects, it's better practice to copy and paste an effect into your own stylesheet, so a user doesn't have to download hover.css in its entirety.
If you plan on only using one or several effects, it's better practice to copy and paste an effect into your own stylesheet, so a user doesn't have to download `css/hover.css` in its entirety.

Assuming you want to use the `Grow` effect:

1. Download hover.css
2. In hover.css, find the 'Grow' CSS (each effect is named using a comment above it):
1. Download Hover.css
2. In `css/hover.css`, find the 'Grow' CSS (each effect is named using a comment above it):

```css
/* Grow */
Expand All @@ -40,90 +40,126 @@ Assuming you want to use the `Grow` effect:
3. Copy this effect and then paste it into your own stylesheet.
4. In the HTML file which you'd like the effect to appear, add the class of `.hvr-grow` to your chosen element.

Example element before applying hover.css effect:
Example element before applying Hover.css effect:

```html
<a href="#">Add to Basket</a>
```

Example element after applying hover.css effect:
Example element after applying Hover.css effect:

```html
<a href="#" class="hvr-grow">Add to Basket</a>
```

Note: As of 2.0.0 all hover.css class names are prefixed with `hvr-` to prevent conflicts with other libraries/stylesheets. If using SASS, this can easily be changed using the `$nameSpace` variable in `scss/_options.scss`.
Note: As of 2.0.0 all Hover.css class names are prefixed with `hvr-` to prevent conflicts with other libraries/stylesheets. If using SASS, this can easily be changed using the `$nameSpace` variable in `scss/_options.scss`.

### Reference hover.css
### Reference Hover.css

If you plan on using many hover.css effects, you may like to reference the entire hover.css stylesheet.
If you plan on using many Hover.css effects, you may like to reference the entire Hover.css stylesheet.

1. Download `hover-min.css`
2. Add `hover-min.css` to your websites files, in a directory named `css` for example
3. Reference `hover-min.css` in `<head>` of the HTML page you'd like to add hover.css effects to:
3. Reference `hover-min.css` in `<head>` of the HTML page you'd like to add Hover.css effects to:
```html
<head>
<link href="css/hover-min.css" rel="stylesheet">
</head>
```
4. Assuming you want to use the 'Grow' effect, in the HTML file you'd like to use this effect, add the class of `.hvr-grow` to your chosen element.

Example element before applying hover.css effect:
Example element before applying Hover.css effect:

```html
<a href="#" class="button">Add to Basket</a>
```

Example element after applying hover.css effect:
Example element after applying Hover.css effect:

```html
<a href="#" class="button hvr-grow">Add to Basket</a>
```

### A Note on the `display` Property

To make an element "transformable", hover.css gives the following to all elements it is applied to:
To make an element "transformable", Hover.css gives the following to all elements it is applied to:

```css
display: inline-block;
vertical-align: middle;
```

Should you wish to override this behavior, either remove the above CSS from hover.css or change the `display` property for the element. Be sure to declare the override after the hover.css declarations so the CSS cascade will take effect. Alternatively, if you are using the SASS version of hover.css, you can remove/comment out the `forceBlockLevel()` mixin found in `scss/_hacks.scss`.
Should you wish to override this behavior, either remove the above CSS from Hover.css or change the `display` property for the element. Be sure to declare the override after the Hover.css declarations so the CSS cascade will take effect. Alternatively, if you are using the SASS version of Hover.css, you can remove/comment out the `forceBlockLevel()` mixin found in `scss/_hacks.scss`.

For more information about Transformable elements, see the [CSS Transforms Module](http://www.w3.org/TR/css3-transforms/#transformable-element).

### Using FontAwesome with Icon Effects

Hover.css uses [FontAwesome](https://fortawesome.github.io/Font-Awesome/) for its icon effects. For these effects to work, a reference to the FontAwesome stylesheet must be added by placing the following in the `<head></head>` of your web page:

```html
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
```

Hover.css icons are added to elements via the `:before` pseudo-element. Let's take the Icon Forward effect as an example (browser prefixes and additional styles removed for brevity):

```css
.hvr-icon-forward:before {
content: "\f138";
position: absolute;
right: 1em;
padding: 0 1px;
font-family: FontAwesome;
transform: translateZ(0);
transition-duration: 0.1s;
transition-property: transform;
transition-timing-function: ease-out;
}
```

What's important in the above example are the `font-family` and `content` declarations. `font-family: FontAwesome` tells the browser we want to use a FontAwesome icon in this pseudo-element, and the `content` value says which one. Should you wish to change the icon, change the value of the `content` property. A [full list of the values and the icon they represent can be found here](http://astronautweb.co/snippet/font-awesome/#font-awesome-list).

If you'd rather not tamper with Hover.css itself, you can override the default content value simply by declaring the same declaration again (providing it be declared after the default one either in Hover.css or your own stylesheet):

```css
.hvr-icon-forward:before {
content: "\f001";
}
```

The Icon Forward effect will then display a musical note that moves forward when hovered over (instead of the default arrow in a circle).

## What's Included?

The project consists of the following folders and files:

### css

- **demo-page.css** - Contains styles to demonstrate Hover. Not required in your projects
- **hover-min.css** - The minified/production version of hover.css
- **hover.css** - The development version of hover.css
- **hover-min.css** - The minified/production version of Hover.css
- **hover.css** - The development version of Hover.css

### scss

- **effects** - Contains each individual effect sorted into categorized folders
- **_hacks.scss, _mixins.scss, _options.scss** - SASS Utilities
- **hover.scss** - Development/SCSS version of hover.css
- **hover.scss** - Development/SCSS version of Hover.css

### Other

Other files of note include:

- **index.html** - Demonstrates all hover.css effects
- **Gruntfile.js** - Used for [development of hover.css via Grunt](#using-grunt-for-development).
- **index.html** - Demonstrates all Hover.css effects
- **Gruntfile.js** - Used for [development of Hover.css via Grunt](#using-grunt-for-development).

## Browser Support
Many hover.css effects rely on CSS3 features such as transitions, animations, transforms and pseudo-elements, for that reason, effects may not fully work in older browsers.
Many Hover.css effects rely on CSS3 features such as transitions, animations, transforms and pseudo-elements, for that reason, effects may not fully work in older browsers.

- [Transitions](http://caniuse.com/#search=transitions) and [Animations](http://caniuse.com/#search=animations) - not supported below Internet Explorer 9
- [Transforms](http://caniuse.com/#search=transforms) - not supported below Internet Explorer 10
- [Generated Content (pseudo-elements)](http://caniuse.com/#search=pseudo-elements) - not supported below Internet Explorer 8

Aside from the above mentioned browsers, hover.css is supported across all major browsers. Please see [caniuse.com](http://caniuse.com/) for full support for many web technologies and test your webpages accordingly. It is recommended to apply fallback effects for older browsers, using CSS supported by those browsers or a feature testing library such as [Modernizr](http://modernizr.com/).
Aside from the above mentioned browsers, Hover.css is supported across all major browsers. Please see [caniuse.com](http://caniuse.com/) for full support for many web technologies and test your webpages accordingly. It is recommended to apply fallback effects for older browsers, using CSS supported by those browsers or a feature testing library such as [Modernizr](http://modernizr.com/).

## Using Grunt for Development

Expand All @@ -135,7 +171,7 @@ Grunt is non-essential but can speed up development. With [Grunt installed](http

SASS is non-essential but can speed up development. Preprocess SASS with your favourite software or the environment provided via [Grunt](#using-grunt-for-development).

SASS is used in the hover.css project to separate various CSS into specific files. Each effect is within its own file in the `effects` directory. hover.css also uses the following `.scss` files:
SASS is used in the Hover.css project to separate various CSS into specific files. Each effect is within its own file in the `effects` directory. Hover.css also uses the following `.scss` files:

### _hacks.scss
Contains some hacks applied to certain effects. [Hacks explained here](https://github.com/IanLunn/Hover/wiki/Hacks-Explained).
Expand Down Expand Up @@ -169,9 +205,9 @@ Contains default options, various effect options and the browser prefixes you'd
As of 2.0.0, `_options.scss` also includes a `$nameSpace` option which allows you to change the name all classes are prefixed with. The default namespace is `hvr`.

## License
hover.css is open source, and made available under a [MIT License](http://www.opensource.org/licenses/mit-license.php). Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.
Hover.css is open source, and made available under a [MIT License](http://www.opensource.org/licenses/mit-license.php). Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.

Retaining the author information at the top of `hover.css` and placing it on your credits page or humans.txt is much appreciated.
Retaining the author information at the top of `css/hover.css` and placing it on your credits page or humans.txt is much appreciated.

## Hire Ian Lunn

Expand All @@ -181,7 +217,7 @@ Hire [Ian](http://ianlunn.co.uk) for responsive websites, WordPress websites, an

## Support Future Development

To support the future development of hover.css and other open source projects created by [Ian Lunn](https://github.com/IanLunn), please consider making a donation.
To support the future development of Hover.css and other open source projects created by [Ian Lunn](https://github.com/IanLunn), please consider making a donation.

Your donation is not-for-profit (or beer!), and will allow Ian to spend a little less time on client projects and more time supporting and creating open source software.

Expand All @@ -192,6 +228,6 @@ Thank you.
Bitcoin donations may be sent to the following address:

<div style="text-align: center;">
<a href="bitcoin:1KEbFvcXL8m6LogG2wjSUFz2xH6PeN6jRd?label=hover.css%20Development"><img src="http://ianlunn.co.uk/images/btc-donate.jpg" /></a>
<a href="bitcoin:1KEbFvcXL8m6LogG2wjSUFz2xH6PeN6jRd?label=Hover.css%20Development"><img src="http://ianlunn.co.uk/images/btc-donate.jpg" /></a>
<p>1KEbFvcXL8m6LogG2wjSUFz2xH6PeN6jRd</p>
</div>
4 changes: 2 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ <h2>Background Transitions</h2>

<h2>Icons</h2>

<small>Font icons courtesy of <a href="https://fortawesome.github.io/Font-Awesome/">FontAwesome</a>. <a href="#">How to use FontAwesome icons</a> with Hover.css.</small>
<small>Font icons courtesy of <a href="https://fortawesome.github.io/Font-Awesome/">FontAwesome</a>. <a href="https://github.com/IanLunn/Hover/#using-fontawesome-with-icon-effects">How to use FontAwesome icons</a> with Hover.css.</small>

<a href="#" class="hvr-icon-back">Icon Back</a>
<a href="#" class="hvr-icon-forward">Icon Forward</a>
Expand Down Expand Up @@ -189,7 +189,7 @@ <h2>About Hover.css</h2>

<h3>License</h3>

<p>hover.css is open source, and made available under a <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>. Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.
<p>Hover.css is open source, and made available under a <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>. Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.

<p>Placing author information in your stylesheet, credits page or humans.txt is much appreciated.</p>
</div>
Expand Down

0 comments on commit 27e33d1

Please sign in to comment.