Solved

Font Awesome and MVC 5

Posted on 2014-12-09
11
973 Views
Last Modified: 2014-12-09
Hi All,

I'm trying to install the font awesome package to an mvc project.

I've ran the following
Install-Package Mvc.RazorTools.FontAwesome

which has installed fine and i now have the .css added to content and the app_start -> razor tools -> fontawesome.cs added

I have added the following to the top of my layout;

@Styles.Render("~/Content/fontawesome")

and then tried the following inside the page

@Html.FontAwesome(FontAwesomeIconSet.Star)

however this throws an error when i try to run this?

can anyone tell me what i am doing wrong here?

I have also tried <i class="fa fa-facebook-square"></i> as an example too and this doesnt appear either.
0
Comment
Question by:flynny
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 

Author Comment

by:flynny
ID: 40488823
Error I get when trying to use the html helper is

CS1061: 'System.Web.Mvc.HtmlHelper<dynamic>' does not contain a definition for 'FontAwesome' and no extension method 'FontAwesome' accepting a first argument of type 'System.Web.Mvc.HtmlHelper<dynamic>' could be found (are you missing a using directive or an assembly reference?)
0
 

Author Comment

by:flynny
ID: 40488841
Ok I have progressed

I added to the view web.config and now have

  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization"/>
        <add namespace="System.Web.Routing" />
        <add namespace="WebApplication1" />
        <add namespace="WebApplication1.Helpers" />
        <add namespace="Mvc.RazorTools.FontAwesome"/>
      </namespaces>
    </pages>
  </system.web.webPages.razor>

Open in new window


and i get the following error;

Assembly 'Mvc.RazorTools.FontAwesome, Version=4.1.0.0, Culture=neutral, PublicKeyToken=null' uses 'System.Web.Mvc, Version=5.2.2.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' which has a higher version than referenced assembly 'System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'

now do i have to update the MVC version i am using and if so is it possible to do ove nuget?
0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 40488872
You most likely just need a using at the top of your Razor.

e.g.

@using Mvc.RazorTools.FontAwesome

Open in new window

0
Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

 

Author Comment

by:flynny
ID: 40488877
HI Kauf,

thanks for the reply.

I added

<add namespace="Mvc.RazorTools.FontAwesome"/>

to my web.config in the views folder which now gives the above error? Can i Upgrade 5.0.0.0 to 5.2.2.0?

If so is it possible through nuget?
0
 

Author Comment

by:flynny
ID: 40488919
Ok,

Sorry for being a wally (i.m new to MVC).

I've upgraded the MVC library and now it is running

@Html.FontAwesome(FontAwesomeIconSet.Star)

and rendering as a <i> but the icons ar enot appearing?

I've checked under firebug and i'm getting a 404 on the.css file. Now the font-awesome.css is held under ~/Content/font-awesome.css (and .min.css is there too).

In the font-awesome.cs file it has Mvc.RazorTools.BundleManager.Styles.Include("~/Content/font-awesome.css"); (this is running too as I tested a break point on it.

I reference in the view as follows;

@Styles.Render("~/Content/fontawesome")

an ideas?
0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 40488920
Yes, and yes.
0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 40488924
and rendering as a <i> but the icons ar enot appearing?
Is is just <i>, or does the <i> include a class attribute? If so, is the class attribute's value correct? You may want to view the source of your page and ensure that you see that bundle being spit out.
0
 

Author Comment

by:flynny
ID: 40488951
sorry yes the class element is being applied e.g.

@Html.FontAwesome(FontAwesomeIconSet.Star)[/code[]

is rendered as

[code]<i class="fa fa-star"></i>

Open in new window


sorry about that.

however when i look at the source and in the head

<link href="/Content/fontawesome" rel="stylesheet">

is added but if i look under the network i get a 404 on /content/fontawesome?

Now (forgive me as im new to mvc) I have not added any reference under bundleconfig.cs for font-awesome. But under the App_Start -> Razor Tools -> font-awesome.cs file it has  

Mvc.RazorTools.BundleManager.Styles.Include("~/Content/font-awesome.css");

Open in new window


which i assume add to the bundle, i assume i am referencing it wrongly in the layout?
0
 
LVL 75

Accepted Solution

by:
käµfm³d   👽 earned 500 total points
ID: 40489039
OK, I played around with this a bit, and the issue is how Razor Tools manages its bundles. You need to change your @Styles.Render("~/Content/fontawesome") to:

@Styles.Render("~/Styles/razortools")

Open in new window

0
 

Author Comment

by:flynny
ID: 40489050
Perfect.

How did you work this out please kaufmed? is there any way I can customise this virtual path?
0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 40489093
I set a breakpoint in FontAwesome.cs. Then I looked inside the Styles property:

Screenshot
The Path property is documented as "Gets ...", which would imply read-only (by Micrsoft's convention); however, the property is writeable, so you can overwrite it:

Mvc.RazorTools.BundleManager.Styles.Path = "~/Content/fontawesome";

Open in new window


You may do so at your own risk, though. If the maintainers decide to change this, then your code will break. It may be worth asking a question on the project website to ensure that they don't plan on changing it. (But if you never upgrade that package, then you won't have to worry about it. This is sketchy, though.)
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
There are cases when e.g. an IT administrator wants to have full access and view into selected mailboxes on Exchange server, directly from his own email account in Outlook or Outlook Web Access. This proves useful when for example administrator want…
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question