LIMITATION: 18px Height - Arrows are set in an 18px block. Used in a container with a height greater than 18px will show the next arrow in the sprite.
Sprite Directions: Using the 18px block, subtract 18px from the background y position for the next image.
For example, if you want to center the first arrow (green) on a link: background: url(http://services.igloocommunities.com/download/lib/icons/arrows/arrow4png) no-repeat 0 4px
To use the second arrow (teal), subtract 18 x 1 = 18px background: url(http://services.igloocommunities.com/download/lib/icons/arrows/arrow4png) no-repeat 0 -14px
To use the fifth arrow (red), subtract 18 x 4 = 72px background: url(http://services.igloocommunities.com/download/lib/icons/arrows/arrow4png) no-repeat 0 -68px
Would you like to comment?
You must be a member. Sign In if you are already a member.
){kind=link}
1 Comment
LIMITATION: 18px Height - Arrows are set in an 18px block. Used in a container with a height greater than 18px will show the next arrow in the sprite.
Sprite Directions: Using the 18px block, subtract 18px from the background y position for the next image.
For example, if you want to center the first arrow (green) on a link:
background: url(http://services.igloocommunities.com/download/lib/icons/arrows/arrow4png) no-repeat 0 4px
To use the second arrow (teal), subtract 18 x 1 = 18px
background: url(http://services.igloocommunities.com/download/lib/icons/arrows/arrow4png) no-repeat 0 -14px
To use the fifth arrow (red), subtract 18 x 4 = 72px
background: url(http://services.igloocommunities.com/download/lib/icons/arrows/arrow4png) no-repeat 0 -68px