Font Icons per CSS nutzen

Font Icons per CSS nutzen

Nov 10 2014
Posted by : Dennis Maaßen

CSS Tutorials Webdesign

Font Icons sind mittlerweile nicht mehr wegzudenken, ob Glyphicons, Fontawesome oder viele andere. Durch sie ersparen wir Webdesigner uns endlich das hantieren mit unendlich langen Listen von mini .gif oder .png Icons. Zudem wird auch noch der verursachte Traffic gemindert, was logischerweise auch zu schnelleren Ladezeiten führt.

Die nutzung von Font Icons ist sehr einfach – man bindet kurzerhand ein Stylesheet in den Header seiner Webseite ein :

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

1	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Und schon hat man Zugriff auf mittlerweile 479 FontAwesome Icons.

<i class="fa fa-area-chart"></i>

1	<i class="fa fa-area-chart"></i>

Manchmal würde man sie jedoch gern per CSS definieren, wenn es darum geht sie in in Listen oder PHP Funktionen einzubinden.

Das lässt sich ganz einfach mit der :after oder :before Methode realisieren :

<a href="http://3d-arena.de/" class="arrow">Klick mich !</a></div>

1	<a href="http://3d-arena.de/" class="arrow">Klick mich !</a></div>

.arrow:before {
	position: absolute;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	color: #690;
	margin-top: 10px;
	right: 10px;
	content: "\f0da";
}

.arrow:before {

position: absolute;

font-family: FontAwesome;

font-style: normal;

font-weight: normal;

text-decoration: inherit;

color: #690;

margin-top: 10px;

right: 10px;

content: "\f0da";

}

Den content: Code durch den jeweiligen Iconcode ersetzen.

Hier eine komplette Liste aller FontAwesome Shortcodes alphabetisch sortiert :

#	Name	Icon	Code
001	fa fa-adjust		“\f042″
002	fa fa-adn		“\f170″
003	fa fa-align-center		“\f037″
004	fa fa-align-justify		“\f039″
005	fa fa-align-left		“\f036″
006	fa fa-align-right		“\f038″
007	fa fa-ambulance		“\f0f9″
008	fa fa-anchor		“\f13d”
009	fa fa-android		“\f17b”
010	fa fa-angellist		“\f209″
011	fa fa-angle-double-down		“\f103″
012	fa fa-angle-double-left		“\f100″
013	fa fa-angle-double-right		“\f101″
014	fa fa-angle-double-up		“\f102″
015	fa fa-angle-down		“\f107″
016	fa fa-angle-left		“\f104″
017	fa fa-angle-right		“\f105″
018	fa fa-angle-up		“\f106″
019	fa fa-apple		“\f179″
020	fa fa-archive		“\f187″
021	fa fa-area-chart		“\f1fe”
022	fa fa-arrow-circle-down		“\f0ab”
023	fa fa-arrow-circle-left		“\f0a8″
024	fa fa-arrow-circle-o-down		“\f01a”
025	fa fa-arrow-circle-o-left		“\f190″
026	fa fa-arrow-circle-o-right		“\f18e”
027	fa fa-arrow-circle-o-up		“\f01b”
028	fa fa-arrow-circle-right		“\f0a9″
029	fa fa-arrow-circle-up		“\f0aa”
030	fa fa-arrow-down		“\f063″
031	fa fa-arrow-left		“\f060″
032	fa fa-arrow-right		“\f061″
033	fa fa-arrow-up		“\f062″
034	fa fa-arrows		“\f047″
035	fa fa-arrows-alt		“\f0b2″
036	fa fa-arrows-h		“\f07e”
037	fa fa-arrows-v		“\f07d”
038	fa fa-asterisk		“\f069″
039	fa fa-at		“\f1fa”
040	fa fa-backward		“\f04a”
041	fa fa-ban		“\f05e”
042	fa fa-bar-chart		“\f080″
043	fa fa-barcode		“\f02a”
044	fa fa-bars		“\f0c9″
045	fa fa-beer		“\f0fc”
046	fa fa-behance		“\f1b4″
047	fa fa-behance-square		“\f1b5″
048	fa fa-bell		“\f0f3″
049	fa fa-bell-o		“\f0a2″
050	fa fa-bell-slash		“\f1f6″
051	fa fa-bell-slash-o		“\f1f7″
052	fa fa-bicycle		“\f206″
053	fa fa-binoculars		“\f1e5″
054	fa fa-birthday-cake		“\f1fd”
055	fa fa-bitbucket		“\f171″
056	fa fa-bitbucket-square		“\f172″
057	fa fa-bold		“\f032″
058	fa fa-bolt		“\f0e7″
059	fa fa-bomb		“\f1e2″
060	fa fa-book		“\f02d”
061	fa fa-bookmark		“\f02e”
062	fa fa-bookmark-o		“\f097″
063	fa fa-briefcase		“\f0b1″
064	fa fa-btc		“\f15a”
065	fa fa-bug		“\f188″
066	fa fa-building		“\f1ad”
067	fa fa-building-o		“\f0f7″
068	fa fa-bullhorn		“\f0a1″
069	fa fa-bullseye		“\f140″
070	fa fa-bus		“\f207″
071	fa fa-calculator		“\f1ec”
072	fa fa-calendar		“\f073″
073	fa fa-calendar-o		“\f133″
074	fa fa-camera		“\f030″
075	fa fa-camera-retro		“\f083″
076	fa fa-car		“\f1b9″
077	fa fa-caret-down		“\f0d7″
078	fa fa-caret-left		“\f0d9″
079	fa fa-caret-right		“\f0da”
080	fa fa-caret-square-o-down		“\f150″
081	fa fa-caret-square-o-left		“\f191″
082	fa fa-caret-square-o-right		“\f152″
083	fa fa-caret-square-o-up		“\f151″
084	fa fa-caret-up		“\f0d8″
085	fa fa-cc		“\f20a”
086	fa fa-cc-amex		“\f1f3″
087	fa fa-cc-discover		“\f1f2″
088	fa fa-cc-mastercard		“\f1f1″
089	fa fa-cc-paypal		“\f1f4″
090	fa fa-cc-stripe		“\f1f5″
091	fa fa-cc-visa		“\f1f0″
092	fa fa-certificate		“\f0a3″
093	fa fa-chain-broken		“\f127″
094	fa fa-check		“\f00c”
095	fa fa-check-circle		“\f058″
096	fa fa-check-circle-o		“\f05d”
097	fa fa-check-square		“\f14a”
098	fa fa-check-square-o		“\f046″
099	fa fa-chevron-circle-down		“\f13a”
100	fa fa-chevron-circle-left		“\f137″
101	fa fa-chevron-circle-right”]		“\f138″
102	fa fa-chevron-circle-up		“\f139″
103	fa fa-chevron-down		“\f078″
104	fa fa-chevron-left		“\f053″
105	fa fa-chevron-right		“\f054″
106	fa fa-chevron-up		“\f077″
107	fa fa-child		“\f1ae”
108	fa fa-circle		“\f111″
109	fa fa-circle-o		“\f10c”
110	fa fa-circle-o-notch		“\f1ce”
111	fa fa-circle-thin		“\f1db”
112	fa fa-clipboard		“\f0ea”
113	fa fa-clock-o		“\f017″
114	fa fa-cloud		“\f0c2″
115	fa fa-cloud-download		“\f0ed”
116	fa fa-cloud-upload		“\f0ee”
117	fa fa-code		“\f121″
118	fa fa-code-fork		“\f126″
119	fa fa-codepen		“\f1cb”
120	fa fa-coffee		“\f0f4″
121	fa fa-cog		“\f013″
122	fa fa-cogs		“\f085″
123	fa fa-columns		“\f0db”
124	fa fa-comment		“\f075″
125	fa fa-comment-o		“\f0e5″
126	fa fa-comments		“\f086″
127	fa fa-comments-o		“\f0e6″
128	fa fa-compass		“\f14e”
129	fa fa-compress		“\f066″
130	fa fa-copyright		“\f1f9″
131	fa fa-credit-card		“\f09d”
132	fa fa-crop		“\f125″
133	fa fa-crosshairs		“\f05b”
134	fa fa-css3		“\f13c”
135	fa fa-cube		“\f1b2″
136	fa fa-cubes		“\f1b3″
137	fa fa-cutlery		“\f0f5″
138	fa fa-database		“\f1c0″
139	fa fa-delicious		“\f1a5″
140	fa fa-desktop		“\f108″
141	fa fa-deviantart		“\f1bd”
142	fa fa-digg		“\f1a6″
143	fa fa-dot-circle-o		“\f192″
144	fa fa-download		“\f019″
145	fa fa-dribbble		“\f17d”
146	fa fa-dropbox		“\f16b”
147	fa fa-drupal		“\f1a9″
148	fa fa-eject		“\f052″
149	fa fa-ellipsis-h		“\f141″
150	fa fa-ellipsis-v		“\f142″
151	fa fa-empire		“\f1d1″
152	fa fa-envelope		“\f0e0″
153	fa fa-envelope-o		“\f003″
154	fa fa-envelope-square		“\f199″
155	fa fa-eraser		“\f12d”
156	fa fa-eur		“\f153″
157	fa fa-exchange		“\f0ec”
158	fa fa-exclamation		“\f12a”
159	fa fa-exclamation-circle		“\f06a”
160	fa fa-exclamation-triangle		“\f071″
161	fa fa-expand		“\f065″
162	fa fa-external-link		“\f08e”
163	fa fa-external-link-square		“\f14c”
164	fa fa-eye		“\f06e”
165	fa fa-eye-slash		“\f070″
166	fa fa-eyedropper		“\f1fb”
167	fa fa-facebook		“\f09a”
168	fa fa-facebook-square		“\f082″
169	fa fa-fast-backward		“\f049″
170	fa fa-fast-forward		“\f050″
171	fa fa-fax		“\f1ac”
172	fa fa-female		“\f182″
173	fa fa-fighter-jet		“\f0fb”
174	fa fa-file		“\f15b”
175	fa fa-file-archive-o		“\f1c6″
176	fa fa-file-audio-o		“\f1c7″
177	fa fa-file-code-o		“\f1c9″
178	fa fa-file-excel-o		“\f1c3″
179	fa fa-file-image-o		“\f1c5″
180	fa fa-file-o		“\f016″
181	fa fa-file-pdf-o		“\f1c1″
182	fa fa-file-powerpoint-o		“\f1c4″
183	fa fa-file-text		“\f15c”
184	fa fa-file-text-o		“\f0f6″
185	fa fa-file-video-o		“\f1c8″
186	fa fa-file-word-o		“\f1c2″
187	fa fa-files-o		“\f0c5″
188	fa fa-film		“\f008″
189	fa fa-filter		“\f0b0″
190	fa fa-fire		“\f06d”
191	fa fa-fire-extinguisher		“\f134″
192	fa fa-flag		“\f024″
193	fa fa-flag-checkered		“\f11e”
194	fa fa-flag-o		“\f11d”
195	fa fa-flask		“\f0c3″
196	fa fa-flickr		“\f16e”
197	fa fa-floppy-o		“\f0c7″
198	fa fa-folder		“\f07b”
199	fa fa-folder-o		“\f114″
200	fa fa-folder-open		“\f07c”
201	fa fa-folder-open-o		“\f115″
202	fa fa-font		“\f031″
203	fa fa-forward		“\f04e”
204	fa fa-foursquare		“\f180″
205	fa fa-frown-o		“\f119″
206	fa fa-futbol-o		“\f1e3″
207	fa fa-gamepad		“\f11b”
208	fa fa-gavel		“\f0e3″
209	fa fa-gbp		“\f154″
210	fa fa-gift		“\f06b”
211	fa fa-git		“\f1d3″
212	fa fa-git-square		“\f1d2″
213	fa fa-github		“\f09b”
214	fa fa-github-alt		“\f113″
215	fa fa-github-square		“\f092″
216	fa fa-gittip		“\f184″
217	fa fa-glass		“\f000″
218	fa fa-globe		“\f0ac”
219	fa fa-google		“\f1a0″
220	fa fa-google-plus		“\f0d5″
221	fa fa-google-plus-square		“\f0d4″
222	fa fa-google-wallet		“\f1ee”
223	fa fa-graduation-cap		“\f19d”
224	fa fa-h-square		“\f0fd”
225	fa fa-hacker-news		“\f1d4″
226	fa fa-hand-o-down		“\f0a7″
227	fa fa-hand-o-left		“\f0a5″
228	fa fa-hand-o-right		“\f0a4″
229	fa fa-hand-o-up		“\f0a6″
230	fa fa-hdd-o		“\f0a0″
231	fa fa-header		“\f1dc”
232	fa fa-headphones		“\f025″
233	fa fa-heart		“\f004″
234	fa fa-heart-o		“\f08a”
235	fa fa-history		“\f1da”
236	fa fa-home		“\f015″
237	fa fa-hospital-o		“\f0f8″
238	fa fa-html5		“\f13b”
239	fa fa-ils		“\f20b”
240	fa fa-inbox		“\f01c”
241	fa fa-indent		“\f03c”
242	fa fa-info		“\f129″
243	fa fa-info-circle		“\f05a”
244	fa fa-inr		“\f156″
245	fa fa-instagram		“\f16d”
246	fa fa-ioxhost		“\f208″
247	fa fa-italic		“\f033″
248	fa fa-joomla		“\f1aa”
249	fa fa-jpy		“\f157″
250	fa fa-jsfiddle		“\f1cc”
251	fa fa-key		“\f084″
252	fa fa-keyboard-o		“\f11c”
253	fa fa-krw		“\f159″
254	fa fa-language		“\f1ab”
255	fa fa-laptop		“\f109″
256	fa fa-lastfm		“\f202″
257	fa fa-lastfm-square		“\f203″
258	fa fa-leaf		“\f06c”
259	fa fa-lemon-o		“\f094″
260	fa fa-level-down		“\f149″
261	fa fa-level-up		“\f148″
262	fa fa-life-ring		“\f1cd”
263	fa fa-lightbulb-o		“\f0eb”
264	fa fa-line-chart		“\f201″
265	fa fa-link		“\f0c1″
266	fa fa-linkedin		“\f0e1″
267	fa fa-linkedin-square		“\f08c”
268	fa fa-linux		“\f17c”
269	fa fa-list		“\f03a”
270	fa fa-list-alt		“\f022″
271	fa fa-list-ol		“\f0cb”
272	fa fa-list-ul		“\f0ca”
273	fa fa-location-arrow		“\f124″
274	fa fa-lock		“\f023″
275	fa fa-long-arrow-down		“\f175″
276	fa fa-long-arrow-left		“\f177″
277	fa fa-long-arrow-right		“\f178″
278	fa fa-long-arrow-up		“\f176″
279	fa fa-magic		“\f0d0″
280	fa fa-magnet		“\f076″
281	fa fa-male		“\f183″
282	fa fa-map-marker		“\f041″
283	fa fa-maxcdn		“\f136″
284	fa fa-meanpath		“\f20c”
285	fa fa-medkit		“\f0fa”
286	fa fa-meh-o		“\f11a”
287	fa fa-microphone		“\f130″
288	fa fa-microphone-slash		“\f131″
289	fa fa-minus		“\f068″
290	fa fa-minus-circle		“\f056″
291	fa fa-minus-square		“\f146″
292	fa fa-minus-square-o		“\f147″
293	fa fa-mobile		“\f10b”
294	fa fa-money		“\f0d6″
295	fa fa-moon-o		“\f186″
296	fa fa-music		“\f001″
297	fa fa-newspaper-o		“\f1ea”
298	fa fa-openid		“\f19b”
299	fa fa-outdent		“\f03b”
300	fa fa-pagelines		“\f18c”
301	fa fa-paint-brush		“\f1fc”
302	fa fa-paper-plane		“\f1d8″
303	fa fa-paper-plane-o		“\f1d9″
304	fa fa-paperclip		“\f0c6″
305	fa fa-paragraph		“\f1dd”
306	fa fa-pause		“\f04c”
307	fa fa-paw		“\f1b0″
308	fa fa-paypal		“\f1ed”
309	fa fa-pencil		“\f040″
310	fa fa-pencil-square		“\f14b”
311	fa fa-pencil-square-o		“\f044″
312	fa fa-phone		“\f095″
313	fa fa-phone-square		“\f098″
314	fa fa-picture-o		“\f03e”
315	fa fa-pie-chart		“\f200″
316	fa fa-pied-piper		“\f1a7″
317	fa fa-pied-piper-alt		“\f1a8″
318	fa fa-pinterest		“\f0d2″
319	fa fa-pinterest-square		“\f0d3″
320	fa fa-plane		“\f072″
321	fa fa-play		“\f04b”
322	fa fa-play-circle		“\f144″
323	fa fa-play-circle-o		“\f01d”
324	fa fa-plug		“\f1e6″
325	fa fa-plus		“\f067″
326	fa fa-plus-circle		“\f055″
327	fa fa-plus-square		“\f0fe”
328	fa fa-plus-square-o		“\f196″
329	fa fa-power-off		“\f011″
330	fa fa-print		“\f02f”
331	fa fa-puzzle-piece		“\f12e”
332	fa fa-qq		“\f1d6″
333	fa fa-qrcode		“\f029″
334	fa fa-question		“\f128″
335	fa fa-question-circle		“\f059″
336	fa fa-quote-left		“\f10d”
337	fa fa-quote-right		“\f10e”
338	fa fa-random		“\f074″
339	fa fa-rebel		“\f1d0″
340	fa fa-recycle		“\f1b8″
341	fa fa-reddit		“\f1a1″
342	fa fa-reddit-square		“\f1a2″
343	fa fa-refresh		“\f021″
344	fa fa-renren		“\f18b”
345	fa fa-repeat		“\f01e”
346	fa fa-reply		“\f112″
347	fa fa-reply-all		“\f122″
348	fa fa-retweet		“\f079″
349	fa fa-road		“\f018″
350	fa fa-rocket		“\f135″
351	fa fa-rss		“\f09e”
352	fa fa-rss-square		“\f143″
353	fa fa-rub		“\f158″
354	fa fa-scissors		“\f0c4″
355	fa fa-search		“\f002″
356	fa fa-search-minus		“\f010″
357	fa fa-search-plus		“\f00e”
358	fa fa-share		“\f064″
359	fa fa-share-alt		“\f1e0″
360	fa fa-share-alt-square		“\f1e1″
361	fa fa-share-square		“\f14d”
362	fa fa-share-square-o		“\f045″
363	fa fa-shield		“\f132″
364	fa fa-shopping-cart		“\f07a”
365	fa fa-sign-in		“\f090″
366	fa fa-sign-out		“\f08b”
367	fa fa-signal		“\f012″
368	fa fa-sitemap		“\f0e8″
369	fa fa-skype		“\f17e”
370	fa fa-slack		“\f198″
371	fa fa-sliders		“\f1de”
372	fa fa-slideshare		“\f1e7″
373	fa fa-smile-o		“\f118″
374	fa fa-sort		“\f0dc”
375	fa fa-sort-alpha-asc		“\f15d”
376	fa fa-sort-alpha-desc		“\f15e”
377	fa fa-sort-amount-asc		“\f160″
378	fa fa-sort-amount-desc		“\f161″
379	fa fa-sort-asc		“\f0de”
380	fa fa-sort-desc		“\f0dd”
381	fa fa-sort-numeric-asc		“\f162″
382	fa fa-sort-numeric-desc		“\f163″
383	fa fa-soundcloud		“\f1be”
384	fa fa-space-shuttle		“\f197″
385	fa fa-spinner		“\f110″
386	fa fa-spoon		“\f1b1″
387	fa fa-spotify		“\f1bc”
388	fa fa-square		“\f0c8″
389	fa fa-square-o		“\f096″
390	fa fa-stack-exchange		“\f18d”
391	fa fa-stack-overflow		“\f16c”
392	fa fa-star		“\f005″
393	fa fa-star-half		“\f089″
394	fa fa-star-half-o		“\f123″
395	fa fa-star-o		“\f006″
396	fa fa-steam		“\f1b6″
397	fa fa-steam-square		“\f1b7″
398	fa fa-step-backward		“\f048″
399	fa fa-step-forward		“\f051″
400	fa fa-stethoscope		“\f0f1″
401	fa fa-stop		“\f04d”
402	fa fa-strikethrough		“\f0cc”
403	fa fa-stumbleupon		“\f1a4″
404	fa fa-stumbleupon-circle		“\f1a3″
405	fa fa-subscript		“\f12c”
406	fa fa-suitcase		“\f0f2″
407	fa fa-sun-o		“\f185″
408	fa fa-superscript		“\f12b”
409	fa fa-table		“\f0ce”
410	fa fa-tablet		“\f10a”
411	fa fa-tachometer		“\f0e4″
412	fa fa-tag		“\f02b”
413	fa fa-tags		“\f02c”
414	fa fa-tasks		“\f0ae”
415	fa fa-taxi		“\f1ba”
416	fa fa-tencent-weibo		“\f1d5″
417	fa fa-terminal		“\f120″
418	fa fa-text-height		“\f034″
419	fa fa-text-width		“\f035″
420	fa fa-th		“\f00a”
421	fa fa-th-large		“\f009″
422	fa fa-th-list		“\f00b”
423	fa fa-thumb-tack		“\f08d”
424	fa fa-thumbs-down		“\f165″
425	fa fa-thumbs-o-down		“\f088″
426	fa fa-thumbs-o-up		“\f087″
427	fa fa-thumbs-up		“\f164″
428	fa fa-ticket		“\f145″
429	fa fa-times		“\f00d”
430	fa fa-times-circle		“\f057″
431	fa fa-times-circle-o		“\f05c”
432	fa fa-tint		“\f043″
433	fa fa-toggle-off		“\f204″
434	fa fa-toggle-on		“\f205″
435	fa fa-trash		“\f1f8″
436	fa fa-trash-o		“\f014″
437	fa fa-tree		“\f1bb”
438	fa fa-trello		“\f181″
439	fa fa-trophy		“\f091″
440	fa fa-truck		“\f0d1″
441	fa fa-try		“\f195″
442	fa fa-tty		“\f1e4″
443	fa fa-tumblr		“\f173″
444	fa fa-tumblr-square		“\f174″
445	fa fa-twitch		“\f1e8″
446	fa fa-twitter		“\f099″
447	fa fa-twitter-square		“\f081″
448	fa fa-umbrella		“\f0e9″
449	fa fa-underline		“\f0cd”
450	fa fa-undo		“\f0e2″
451	fa fa-university		“\f19c”
452	fa fa-unlock		“\f09c”
453	fa fa-unlock-alt		“\f13e”
454	fa fa-upload		“\f093″
455	fa fa-usd		“\f155″
456	fa fa-user		“\f007″
457	fa fa-user-md		“\f0f0″
458	fa fa-users		“\f0c0″
459	fa fa-video-camera		“\f03d”
460	fa fa-vimeo-square		“\f194″
461	fa fa-vine		“\f1ca”
462	fa fa-vk		“\f189″
463	fa fa-volume-down		“\f027″
464	fa fa-volume-off		“\f026″
465	fa fa-volume-up		“\f028″
466	fa fa-weibo		“\f18a”
467	fa fa-weixin		“\f1d7″
468	fa fa-wheelchair		“\f193″
469	fa fa-wifi		“\f1eb”
470	fa fa-windows		“\f17a”
471	fa fa-wordpress		“\f19a”
472	fa fa-wrench		“\f0ad”
473	fa fa-xing		“\f168″
474	fa fa-xing-square		“\f169″
475	fa fa-yahoo		“\f19e”
476	fa fa-yelp		“\f1e9″
477	fa fa-youtube		“\f167″
478	fa fa-youtube-play		“\f16a”
479	fa fa-youtube-square		“\f166″