09 April 2012 ASP.NET, Font, Web Robert Muehsig

Vor einiger Zeit hatte ich schon auf das Font Awesome Projekt hingewiesen. Ursprung des Projektes ist das Twitter Bootstrap UI Kit, allerdings kann man es auch ganz ohne Bootstrap in seine Anwendung integrieren.

Default ASP.NET (MVC…) WebApp erstellen

image

“Font Awesome” Fonts und CSS runterladen und ins Projekt intergrieren

image

Font-Sourcen überprüfen

Wenn man es nach meiner Struktur macht, muss man die font-awesome.css noch bearbeiten und die Links zu den Schriftarten anpassen, so wie hier:

@font-face {
    font-family: 'FontAwesome';
    src: url('font/fontawesome-webfont.eot');
    src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('font/fontawesome-webfont.woff') format('woff'), url('font/fontawesome-webfont.ttf') format('truetype'), url('font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), url('font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

 

Dann noch in der Layouts einbinden:

        <link rel="stylesheet" type="text/css" href="Url.Content(“~/Content/font-awesome.css”)" />

Leider ist es mir bislang nicht gelungen die CSS über Combres oder (in MVC 4 neu) über die Bundles mit auszuliefern. Das ganze endet darin, dass die Font-Dateien nicht gefunden wurden. Mhh…

Und benutzen:

                    <p class="site-title"><i class="icon-cog"></i> ASP.NET <i class="icon-heart" style="font-size: 50px;"></i> Icon Fonts!</p>

image

 

Alles was man mit CSS machen kann, kann man natürlich auf diese Icons anwenden. Was ziemlich genial ist!


Written by Robert Muehsig

Software Developer - from Dresden, Germany, now living & working in Switzerland. Microsoft MVP & Web Geek.
Other Projects: KnowYourStack.com | ExpensiveMeeting | EinKofferVollerReisen.de

If you like the content and want to support me you could buy me a beer or a coffee via Litecoin or Bitcoin - thanks for reading!