1
1
<h3 >Basic Usage</h3 >
2
- <FaIcon @icon =" coffee" class =" foo" /> (explictly using icon attribute, and with additional class name)
2
+ <FaIcon @icon =" coffee" class =" foo" />
3
+ (explictly using icon attribute, and with additional class name)
3
4
<h3 >Mask with Transform</h3 >
4
5
<p >(expected: black square with white dot inside, pushed to the right side)</p >
5
6
<FaIcon @icon =" circle" @transform =" shrink-9 right-4" @mask =" square" />
6
- <h3 >Default fas prefix versus specifying a different prefix for the same icon name</h3 >
7
+ <h3 >Default fas prefix versus specifying a different prefix for the same icon
8
+ name</h3 >
7
9
<FaIcon @icon =" square" />
8
10
<FaIcon @prefix =" far" @icon =" calendar-xmark" />
9
11
<h3 >Missing Icon</h3 >
10
- <p >Expecting no icon between these bars |<FaIcon @icon =" unfindable-icon" />| (and a warning log in the console)</p >
12
+ <p >Expecting no icon between these bars |<FaIcon @icon =" unfindable-icon" />|
13
+ (and a warning log in the console)</p >
11
14
<h3 >Dynamic with Bound Attribute</h3 >
12
15
<div >
13
16
<label for =" magic-slider" >Drag the slider to spin the magic.</label >
14
- <input id =" magic-slider" type =" range" value ={{ this.magic }} {{ on " input" this.onRangeChange }} />
17
+ <input
18
+ id =" magic-slider"
19
+ type =" range"
20
+ value ={{ this.magic }}
21
+ {{ on " input" this.onRangeChange }}
22
+ />
15
23
{{! template-lint-disable no-inline-styles}}
16
24
<div style =" padding:2em;" >
17
25
<FaIcon @icon =" magic" @transform ={{ concat " rotate-" this.magic }} />
18
26
</div >
19
27
</div >
20
28
<h3 >Pro Icon</h3 >
21
- <p >(If you have pro-light-svg-icons installed, this should show the "starshp" & "face-awesome" icons in the light style)</p >
29
+ <p >(If you have pro-light-svg-icons installed, this should show the "starshp"
30
+ & "face-awesome" icons in the light style)</p >
22
31
<FaIcon @prefix =" fal" @icon =" starship" @size =" 2x" />
23
32
<FaIcon @prefix =" fal" @icon =" face-awesome" @size =" 2x" />
24
- <p >(If you have pro-thin-svg-icons installed, this should show the "starshp" & "face-awesome" icons in the thin style)</p >
33
+ <p >(If you have pro-thin-svg-icons installed, this should show the "starshp"
34
+ & "face-awesome" icons in the thin style)</p >
25
35
<FaIcon @prefix =" fat" @icon =" starship" @size =" 2x" />
26
36
<FaIcon @prefix =" fat" @icon =" face-awesome" @size =" 2x" />
27
- <p >(If you have pro-duotone-svg-icons installed, this should show the "starshp" & "face-awesome" icons in the duotone style)</p >
37
+ <p >(If you have pro-duotone-svg-icons installed, this should show the "starshp"
38
+ & "face-awesome" icons in the duotone style)</p >
28
39
<FaIcon @prefix =" fad" @icon =" starship" @size =" 2x" />
29
40
<FaIcon @prefix =" fad" @icon =" face-awesome" @size =" 2x" />
30
- <p >(If you have sharp-solid-svg-icons installed, this should show the starshp" & "face-awesome"" icons in the solids style for the sharp family)</p >
41
+ <p >(If you have sharp-solid-svg-icons installed, this should show the starshp"
42
+ & "face-awesome"" icons in the solids style for the sharp family)</p >
31
43
<FaIcon @prefix =" fass" @icon =" starship" @size =" 2x" />
32
44
<FaIcon @prefix =" fass" @icon =" face-awesome" @size =" 2x" />
33
45
<h3 >Fixed Width</h3 >
34
46
35
47
<div ><FaIcon @icon =" home" @fixedWidth ={{ true }} class =" MistyRose" /> Home</div >
36
48
<div ><FaIcon @icon =" info" @fixedWidth ={{ true }} class =" MistyRose" /> Info</div >
37
- <div ><FaIcon @icon =" book" @fixedWidth ={{ true }} class =" MistyRose" /> Library</div >
38
- <div ><FaIcon @icon =" pencil-alt" @fixedWidth ={{ true }} class =" MistyRose" /> Applications</div >
39
- <div ><FaIcon @icon =" cog" @fixedWidth ={{ true }} class =" MistyRose" /> Settings</div >
49
+ <div ><FaIcon @icon =" book" @fixedWidth ={{ true }} class =" MistyRose" />
50
+ Library</div >
51
+ <div ><FaIcon @icon =" pencil-alt" @fixedWidth ={{ true }} class =" MistyRose" />
52
+ Applications</div >
53
+ <div ><FaIcon @icon =" cog" @fixedWidth ={{ true }} class =" MistyRose" />
54
+ Settings</div >
40
55
<div ><FaIcon @icon =" fax" @fixedWidth ={{ true }} class =" MistyRose" /> Contact</div >
41
56
42
57
<h3 >List Icons</h3 >
43
58
<ul class =" fa-ul" >
44
59
<li ><span class =" fa-li" ><FaIcon @icon =" check-square" /></span >List icons can</li >
45
60
<li ><span class =" fa-li" ><FaIcon @icon =" check-square" /></span >be used to</li >
46
- <li ><span class =" fa-li" ><FaIcon @icon =" spinner" @pulse ={{ true }} /></span >replace bullets</li >
61
+ <li ><span class =" fa-li" ><FaIcon
62
+ @icon =" spinner"
63
+ @pulse ={{ true }}
64
+ /></span >replace bullets</li >
47
65
<li ><span class =" fa-li" ><FaIcon @icon =" square" /></span >in lists</li >
48
66
</ul >
49
67
50
68
<h3 >Animation (Spin)</h3 >
51
- <FaIcon @icon =" sync" @spin ={{ true }} /><br >
69
+ <FaIcon @icon =" sync" @spin ={{ true }} /><br / >
52
70
<FaIcon @icon =" sync" @spin ={{ this.isSpinning }} />
53
- <input id =" spin-it" type =" checkbox" checked ={{ this.isSpinning }} {{ on " click" this.toggleSpinning }} > <label for =" spin-it" >Spin it</label >
71
+ <input
72
+ id =" spin-it"
73
+ type =" checkbox"
74
+ checked ={{ this.isSpinning }}
75
+ {{ on " click" this.toggleSpinning }}
76
+ />
77
+ <label for =" spin-it" >Spin it</label >
54
78
55
79
<h3 >Animation (Pulse)</h3 >
56
- <FaIcon @icon =" cog" @pulse ={{ true }} /><br >
80
+ <FaIcon @icon =" cog" @pulse ={{ true }} /><br / >
57
81
<FaIcon @icon =" cog" @pulse ={{ this.isPulsing }} />
58
- <input id =" pulse-it" type =" checkbox" checked ={{ this.isPulsing }} {{ on " click" this.togglePulsing }} > <label for =" pulse-it" >Pulse it</label >
82
+ <input
83
+ id =" pulse-it"
84
+ type =" checkbox"
85
+ checked ={{ this.isPulsing }}
86
+ {{ on " click" this.togglePulsing }}
87
+ />
88
+ <label for =" pulse-it" >Pulse it</label >
59
89
60
90
<h3 >Sizes</h3 >
61
- 1x <FaIcon @icon =" coffee" /><br >
62
- 2x <FaIcon @icon =" coffee" @size =" 2x" /><br >
63
- 4x <FaIcon @icon =" coffee" @size =" 4x" /><br >
64
- 8x <FaIcon @icon =" coffee" @size =" 8x" /><br >
91
+ 1x
92
+ <FaIcon @icon =" coffee" /><br />
93
+ 2x
94
+ <FaIcon @icon =" coffee" @size =" 2x" /><br />
95
+ 4x
96
+ <FaIcon @icon =" coffee" @size =" 4x" /><br />
97
+ 8x
98
+ <FaIcon @icon =" coffee" @size =" 8x" /><br />
65
99
66
100
<h3 >Rotation</h3 >
67
- 0 <FaIcon @icon =" coffee" /><br >
68
- 90 <FaIcon @icon =" coffee" @rotation =" 90" /><br >
69
- 180 <FaIcon @icon =" coffee" @rotation =" 180" /><br >
70
- 270 <FaIcon @icon =" coffee" @rotation =" 270" /><br >
101
+ 0
102
+ <FaIcon @icon =" coffee" /><br />
103
+ 90
104
+ <FaIcon @icon =" coffee" @rotation =" 90" /><br />
105
+ 180
106
+ <FaIcon @icon =" coffee" @rotation =" 180" /><br />
107
+ 270
108
+ <FaIcon @icon =" coffee" @rotation =" 270" /><br />
71
109
72
110
<h3 >Flip</h3 >
73
111
<FaIcon @icon =" coffee" @flip =" horizontal" />
81
119
<FaIcon @icon =" coffee" @transform =" shrink-6 rotate-30" />
82
120
83
121
<h3 >Masking</h3 >
84
- <FaIcon @icon =" coffee" @transform =" shrink-6" @mask =" circle" />
122
+ <FaIcon @icon =" coffee" @transform =" shrink-6" @mask =" circle" />
85
123
86
124
<h3 >Layers</h3 >
87
125
<span class =" fa-layers fa-lg" >
92
130
<h3 >Alias</h3 >
93
131
<FaIcon @icon =" trash-alt" />
94
132
95
- {{ outlet }}
133
+ {{ outlet }}
0 commit comments