Comments (12)
Hi, I'm implementing BootMetro in a customer project with MVC4 using bundles, and all is rendering without problems. Are you sure that the path to icomoon.css is correct? Use Firefox+Firebug or Chrome dev tools to check the css.
from bootmetro.
It works when I create a bundle that ends with "IconMoon.css" but not when I add it to a bundle with other CSS files. Here is my project structure:
/Content
./bootmetro
../css
.../bootmetro.css ...
.../icomoon.css
../font
.../IcoMoon.tff ...
Here is my bundle configuration:
// Includes bootmetro.css and icomoon.css in the same bundle
bundles.Add(new StyleBundle("~/Content/bootmetro/css/bundle").
Include("~/Content/bootmetro/css/*.css"));
And the markup renders as follows, which looks good to me:
<link href="/Content/bootmetro/css/bundle?v=145zuetRKrzG2g0Mg--K1hfCQv7bm-xYVL4CHqXYBK01" rel="stylesheet"/>
...
<a id="Logo" class="icon-archive" href="#"></a>
The icon never shows. FireBug shows the style as font-family: 'IcoMoon';
with the font name gray-out as though it cannot find the font. When I disable optimizations, every thing works fine. How is your project structure or bundle different from mine?
P.S. Just notice the "Support the Project" link. Is that new? Donation forthcoming, as bootmetro rocks.
from bootmetro.
Ah-hah! It is the order in which you specify the CSS files, as alphabetical ordering does not suffice. Everything works as expected if I change my bundle configuration to the following:
bundles.Add(new StyleBundle(StyleBundle).
Include("~/Content/css/bootstrap*", "~/Content/css/bootmetro*",
"~/Content/css/meto-ui-light.css", "~/Content/css/icomoon.css",
"~/Content/css/date*", "~/Content/css/Site.css"));
Self-service tastes best, though the docs might want to specify the order is important.
from bootmetro.
Er, I was mistaken. That did not fix my problem, as I failed to enable optimizations. When I force it, I get no IcoMoon fonts.
from bootmetro.
Here the code I use in my BundleConfig.cs:
public static void RegisterBundles(BundleCollection bundles)
{
// Scripts
// ------------------------------------------------------------
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/js").Include(
"~/Scripts/bootmetro*",
"~/Scripts/bootstrap-responsive"
));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));
// Styles
// ------------------------------------------------------------
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/css/bootmetro.css",
"~/Content/css/datepicker.css",
"~/Content/css/bootstrap-fileupload.css",
"~/Content/css/daterangepicker.css",
"~/Content/css/bootstrap-responsive.css",
"~/Content/css/metro-ui-light.css",
"~/Content/css/icomoon.css",
"~/Content/css/site.css"
));
}
Note that here I'm using the bootmetro.css from 1.0 branch.
from bootmetro.
Are you sure you have optimizations enabled? I ask because the "~/Content/css" virtual path you passed into StyleBundle points to a real directory, which yields an empty response for me. Also, where is your font directory relative to ~/Content/css?
I'm using .NET 4 rather than 4.5. Could that be the difference?
from bootmetro.
I don't have the empty response problem.... The fonts are located in ~/Content/font folder.
And I'm using .NET 4.5. In theory bundles should work only in 4.5, not in lower version of .net....
from bootmetro.
Hmm, even in .NET 4.5, changing the bundle's virtual path to a directory that really exists on disk results in a "403 Forbidden" with optimizations enabled because you cannot request a directory unless "directory browsing" is enabled. Could it be because I am using IIS Express? Are you using full-blown IIS instead? You're sure optimizations are enabled by turning debug = false
in web.config or setting BundleTable.EnableOptimizations = true
?
from bootmetro.
ok got it.
First: ensure that the virtual path in BundleConfig don't match an existing physical path, I changed mine to: "/Content/styles" and accordingly in the layout: @Styles.Render("/Content/styles")
Second: in the IcoMoon.css replace all the string url('../font with url('/Content/font
et voilà! ;)
from bootmetro.
So did you reproduce the scenario of the browser not rendering the IcoMoon fonts with optimizations enabled?
I think it is something about the web-optimization framework itself, as it doesn't even work when I specify the font with an absolute URL as follows:
@font-face {
font-family: 'IcoMoon';
src: url('http://localhost/opt4_5/Content/font/IcoMoon.eot');
/* ... */
}
I will ask a dedicated question on Monday at Stackoverflow. This question seems to be struggling with the same issue.
from bootmetro.
Initially I was starting the project with debug=false, so all was working correctly, sorry about that; but when I enabled optimizations it was clear that in the bundled css, with all the css mixed in one file only, the relative apth in the icomoon.css was clearly wrong; also if you set a virtual path the same of an existing physical path, mvc give precedence to the physical one.
I suggest you to not use a full url in css, instead of url('http://localhost/opt4_5/Content/font/IcoMoon.eot'); you should use url('/Content/font/IcoMoon.eot'); or when you'll deploy the app in production with a different address you'll face various...headaches! ;)
Make sure to check the rendered html that the paths are resolved correctly, also in the bundle configuration.
I close this issue because it is more related to Asp.Net and not on bootmetro.
from bootmetro.
I tried doing the same with FontAwesome, and it rendered the fonts with optimizations enabled. I wonder if it has something to do with the IcoMoon fonts themselves.
from bootmetro.
Related Issues (20)
- Your online demo links are broken HOT 2
- PIVOT - Documentation is not correct. HOT 1
- Icons are not showing proper items HOT 2
- Suggestion: create a css definition like "class="bs-docs-section-header""
- Win-Commands labels with IE9
- Is the project cloased? HOT 2
- bootmetro HOT 4
- boot metro-master HOT 1
- Add support for pivot item change
- Some demo page links are dead (in the official site)
- bootmetro in a real project HOT 2
- RTL
- Scrolling in the Hub (panorama) takes long time to respond
- Charms Not Working
- Dead links in "Wikipedia Featured" dropdown HOT 2
- Modal box validation error
- does this support live tile? HOT 1
- Vertical scrolling panorama
- Missing Base Template
- How Can I center Tiles?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootmetro.