Mixin: Icon Sprite
The Icon Sprite mixin creates a sprite that can be used in your SASS files.
Where to Find
You can find these mixins in integration/snippets/mixins/icon-sprite.scss.
Basic Icon Sprite
This calls the background image and sets the background repeat to no-repeat. This gets used in all the other mixins.
1@mixin icon-sprite {
2 background-image: url($icon-sprite);
3 background-repeat: no-repeat;
4 background-size: 250px 250px;
5}Specific Icon Sprite Mixins
These mixins set the width, height, and background position of the sprite. You can view the avaliable icons here.
1@mixin arrow-black-large {
2 @include icon-sprite;
3 width: 15px;
4 height: 14px;
5 background-position: -5px -5px;
6}
7
8@mixin arrow-black {
9 @include icon-sprite;
10 width: 10px;
11 height: 10px;
12 background-position: -53px -5px;
13}
14
15@mixin arrow-yellow {
16 @include icon-sprite;
17 width: 11px;
18 height: 10px;
19 background-position: -24px -5px;
20}
21
22@mixin arrow-blue {
23 @include icon-sprite;
24 width: 10px;
25 height: 9px;
26 background-position: -39px -5px;
27}
28
29@mixin down-arrow-white {
30 @include icon-sprite;
31 width: 10px;
32 height: 5px;
33 background-position: -81px -5px;
34}
35
36@mixin up-arrow-yellow {
37 @include icon-sprite;
38 width: 10px;
39 height: 5px;
40 background-position: -96px -5px;
41}
42
43@mixin tick-large-yellow {
44 @include icon-sprite;
45 width: 13px;
46 height: 10px;
47 background-position: -5px -24px;
48}
49
50@mixin tick-large-blue {
51 @include icon-sprite;
52 width: 14px;
53 height: 10px;
54 background-position: -22px -24px;
55}
56
57@mixin tick-small-blue {
58 @include icon-sprite;
59 width: 12px;
60 height: 12px;
61 background-position: -110px 0;
62}
63
64@mixin tick-yellow {
65 @include icon-sprite;
66 width: 11px;
67 height: 8px;
68 background-position: -53px -24px;
69}
70
71@mixin tick-blue {
72 @include icon-sprite;
73 width: 11px;
74 height: 8px;
75 background-position: -39px -24px;
76}
77
78@mixin yellow-quote {
79 @include icon-sprite;
80 width: 20px;
81 height: 15px;
82 background-position: -5px -115px;
83}
84
85@mixin slider-btn {
86 @include icon-sprite;
87 width: 48px;
88 height: 48px;
89 background-position: -4px -62px;
90}
91
92@mixin slider-btn-hover {
93 @include icon-sprite;
94 width: 48px;
95 height: 48px;
96 background-position: -109px -63px;
97}
98
99@mixin copy {
100 @include icon-sprite;
101 width: 15px;
102 height: 16px;
103 background-position: -203px -38px;
104}
105
106@mixin facebook {
107 @include icon-sprite;
108 width: 10px;
109 height: 16px;
110 background-position: -149px -38px;
111}
112
113@mixin linkedin {
114 @include icon-sprite;
115 width: 16px;
116 height: 16px;
117 background-position: -128px -38px;
118}
119
120@mixin twitter {
121 @include icon-sprite;
122 width: 17px;
123 height: 16px;
124 background-position: -106px -38px;
125}
126
127@mixin linkedin-blue {
128 @include icon-sprite;
129 width: 11px;
130 height: 11px;
131 background-position: -187px -38px;
132}
133
134@mixin arrow-yellow-large {
135 @include icon-sprite;
136 width: 16px;
137 height: 16px;
138 background-position: -30px -115px;
139}
140
141@mixin arrow-back {
142 @include icon-sprite;
143 width: 32px;
144 height: 29px;
145 background-position: -5px -179px;
146}
147
148@mixin quote-large {
149 @include icon-sprite;
150 width: 35px;
151 height: 26px;
152 background-position: -43px -179px;
153}
154
155@mixin validated {
156 @include icon-sprite;
157 width: 23px;
158 height: 22px;
159 background-position: -49px -112px;
160}