Skip to content

Commit f6f1035

Browse files
etewiahclaude
andcommitted
Fix Font Awesome 404 errors in production
Merge all Font Awesome CSS into single fontawesome-subset.css file. CSS @import doesn't work with Sprockets in production, causing 404s for fontawesome, solid, and brands CSS files. Removed fontawesome-subset/ subdirectory since its contents are now inlined in the main file. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 62c3725 commit f6f1035

File tree

4 files changed

+146
-145
lines changed

4 files changed

+146
-145
lines changed

app/assets/stylesheets/fontawesome-subset.css

Lines changed: 146 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,149 @@
66
* To regenerate: rake assets:font_awesome_subset
77
*/
88

9-
@import 'fontawesome-subset/fontawesome';
10-
@import 'fontawesome-subset/solid';
11-
@import 'fontawesome-subset/brands';
9+
/* ============================================
10+
* Core Styles
11+
* ============================================ */
12+
13+
.fa,
14+
.fas,
15+
.fa-solid,
16+
.fab,
17+
.fa-brands {
18+
-moz-osx-font-smoothing: grayscale;
19+
-webkit-font-smoothing: antialiased;
20+
display: inline-block;
21+
font-style: normal;
22+
font-variant: normal;
23+
line-height: 1;
24+
text-rendering: auto;
25+
}
26+
27+
/* FA4 backwards compatibility - .fa defaults to solid */
28+
.fa {
29+
font-family: 'Font Awesome 6 Free';
30+
font-weight: 900;
31+
}
32+
33+
/* Sizing */
34+
.fa-2x { font-size: 2em; }
35+
.fa-3x { font-size: 3em; }
36+
.fa-4x { font-size: 4em; }
37+
.fa-lg { font-size: 1.33333em; line-height: 0.75em; vertical-align: -0.0667em; }
38+
39+
/* Animation */
40+
.fa-spin {
41+
animation: fa-spin 2s infinite linear;
42+
}
43+
@keyframes fa-spin {
44+
0% { transform: rotate(0deg); }
45+
100% { transform: rotate(360deg); }
46+
}
47+
48+
/* Fixed width */
49+
.fa-fw {
50+
text-align: center;
51+
width: 1.25em;
52+
}
53+
54+
/* ============================================
55+
* Solid Icons (32 icons)
56+
* ============================================ */
57+
58+
@font-face {
59+
font-family: 'Font Awesome 6 Free';
60+
font-style: normal;
61+
font-weight: 900;
62+
font-display: swap;
63+
src: url('/fonts/fontawesome-subset/fa-solid-900.woff2') format('woff2'),
64+
url('/fonts/fontawesome-subset/fa-solid-900.woff') format('woff');
65+
}
66+
67+
.fa-solid,
68+
.fas {
69+
font-family: 'Font Awesome 6 Free';
70+
font-weight: 900;
71+
}
72+
73+
/* Solid icons used in the application */
74+
.fa-angle-left:before { content: "\f104"; }
75+
.fa-angle-right:before { content: "\f105"; }
76+
.fa-arrows-alt:before { content: "\f0b2"; }
77+
.fa-bars:before { content: "\f0c9"; }
78+
.fa-bath:before { content: "\f2cd"; }
79+
.fa-bed:before { content: "\f236"; }
80+
.fa-car:before { content: "\f1b9"; }
81+
.fa-check:before { content: "\f00c"; }
82+
.fa-chevron-down:before { content: "\f078"; }
83+
.fa-chevron-right:before { content: "\f054"; }
84+
.fa-chevron-up:before { content: "\f077"; }
85+
.fa-cloud-upload-alt:before { content: "\f382"; }
86+
.fa-edit:before { content: "\f044"; }
87+
.fa-envelope:before { content: "\f0e0"; }
88+
.fa-expand:before { content: "\f065"; }
89+
.fa-external-link:before { content: "\f08e"; }
90+
.fa-filter:before { content: "\f0b0"; }
91+
.fa-globe:before { content: "\f0ac"; }
92+
.fa-images:before { content: "\f302"; }
93+
.fa-info-circle:before { content: "\f05a"; }
94+
.fa-lock:before { content: "\f023"; }
95+
.fa-map-marker-alt:before { content: "\f3c5"; }
96+
.fa-mouse-pointer:before { content: "\f245"; }
97+
.fa-pencil:before { content: "\f303"; }
98+
.fa-pencil-alt:before { content: "\f303"; }
99+
.fa-phone:before { content: "\f095"; }
100+
.fa-phone-square:before { content: "\f098"; }
101+
.fa-refresh:before { content: "\f021"; }
102+
.fa-search:before { content: "\f002"; }
103+
.fa-shower:before { content: "\f2cc"; }
104+
.fa-sign-out-alt:before { content: "\f2f5"; }
105+
.fa-spinner:before { content: "\f110"; }
106+
.fa-user:before { content: "\f007"; }
107+
108+
/* ============================================
109+
* Brand Icons (11 icons)
110+
* ============================================ */
111+
112+
@font-face {
113+
font-family: 'Font Awesome 6 Brands';
114+
font-style: normal;
115+
font-weight: 400;
116+
font-display: swap;
117+
src: url('/fonts/fontawesome-subset/fa-brands-400.woff2') format('woff2'),
118+
url('/fonts/fontawesome-subset/fa-brands-400.woff') format('woff');
119+
}
120+
121+
.fa-brands,
122+
.fab {
123+
font-family: 'Font Awesome 6 Brands';
124+
font-weight: 400;
125+
}
126+
127+
/* Brand icons used in the application */
128+
.fa-facebook:before { content: "\f09a"; }
129+
.fa-facebook-f:before { content: "\f39e"; }
130+
.fa-google-plus:before { content: "\f2b3"; }
131+
.fa-instagram:before { content: "\f16d"; }
132+
.fa-linkedin:before { content: "\f0e1"; }
133+
.fa-linkedin-in:before { content: "\f0e1"; }
134+
.fa-pinterest:before { content: "\f0d2"; }
135+
.fa-twitter:before { content: "\f099"; }
136+
.fa-whatsapp:before { content: "\f232"; }
137+
.fa-x-twitter:before { content: "\e61b"; }
138+
.fa-youtube:before { content: "\f167"; }
139+
140+
/* FA4 backwards compatibility - brand icons with .fa class */
141+
.fa.fa-facebook,
142+
.fa.fa-facebook-f,
143+
.fa.fa-google-plus,
144+
.fa.fa-instagram,
145+
.fa.fa-linkedin,
146+
.fa.fa-linkedin-in,
147+
.fa.fa-pinterest,
148+
.fa.fa-twitter,
149+
.fa.fa-whatsapp,
150+
.fa.fa-x-twitter,
151+
.fa.fa-youtube {
152+
font-family: 'Font Awesome 6 Brands';
153+
font-weight: 400;
154+
}

app/assets/stylesheets/fontawesome-subset/brands.css

Lines changed: 0 additions & 46 deletions
This file was deleted.

app/assets/stylesheets/fontawesome-subset/fontawesome.css

Lines changed: 0 additions & 44 deletions
This file was deleted.

app/assets/stylesheets/fontawesome-subset/solid.css

Lines changed: 0 additions & 52 deletions
This file was deleted.

0 commit comments

Comments
 (0)