I make a vue project using this documentation: https://vuejs.org/guide/quick-start.html#creating-a-vue-application
And I wanted to added tailwind css to this project. So I used this guide (from point 2 Install Tailwind CSS): https://tailwindcss.com/docs/guides/vite#vue
But, I see no changes and get this warning:
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
I followed the instuction as it is.
I tried following the content-configuration and I double checked it to see all files in place.
I was expecting tailwind.config.cjs file should be generated but instead tailwind.config.js is generated.
Updates:
On repeating all the steps using this link: https://tailwindcss.com/docs/guides/vite#vue
At step 4:
Add the Tailwind directives to your CSS, When I replace the content for style.css as asked in the step.. Exactly after this point, the error is shown.
Fixed.. Asking in the discord community this was the response:
Thank you for supplying a remotely-hosted repository. It seems to work
fine for me, it could be that you're suffering from a bug that this PR
solves: https://github.com/tailwindlabs/tailwindcss/pull/9650. You
could temporarily try insiders version and see if that fixes it for
you
npm install tailwindcss#insiders
I just gave solution to the same problem. You might have the same...
I had my tailwind.config.js like this:
module.exports = {
content: ["./src**/**/*.{html,js}"],
},
...and I changed the destination folder from "src" to "public", and it worked for me.
Like this:
module.exports = {
content: ["./public/**/*.{html,js}"],
},
Hope this will help you. Good luck and happy coding !
I've been rendering jsreport PDFs succesfully on my development machine. However, when running jsreport on the test server PhantomJS is falling back the use the default font. Any idea how to solve or troubleshoot?
I'm using Handlebars and PhantomJS. Dev machine spec: jsReport 1.0.7 on Node v4.4.5 on 64 bit Win10. Test server spec: jsReport 1.0.7 on Node vx.x.x on 64 bit Win2012 R2 Server
Steps to reproduce:
1) Upload fonts to jsReport
fonts uploaded to jsreport
When selected, jsReport suggests using it as below:
{#image MavenPro-Black #encoding=base64}
2) Add the “Shortcut” to the data file
{
"assets": {
"MavenPro-Black": "{#image MavenPro-Black}",
"MavenPro-Bold": "{#image MavenPro-Bold}",
"MavenPro-Medium": "{#image MavenPro-Medium}",
"MavenPro-Regular": "{#image MavenPro-Regular}",
"jquery": "{#image jquery}"
},
……
}
3) Use the asset in the Report
<head>
<script src="{{assets.jquery}}"></script>
<style>
/* Common Classes */
#font-face {
font-family: 'Maven Pro';
src: url({{assets.MavenPro_Regular}}) format('truetype');
}
The reason that it works on your local is because you have probably this font already installed. The reason why it cannot work on the server is because you have typo in your code:
You data includes property MavenPro-Regular, but in template you access it using {{assets.MavenPro_Regular}}. You just need to change - to _ in your data and it should work.
Working example:
https://playground.jsreport.net/studio/workspace/SklZyycYg/9
Hint 1: Use text recipe and print the raw output to troubleshoot such problems. You would immediately see that the url of font is not filled.
Hint 2: You should consider using jsreport assets feature to embed fonts rather than images extension. You can find demo how to use it with description here.
Edit
Assets extension is part of the default installation and can be considered stable since version 1.3.0
I'm developing a project using font-awesome and HarpJS. I'm just using the pre-compiled CSS version of font-awesome, but since I'm using bower it downloads even the LESS files to my components folder.
The problem is, when I need to compile my assets to a dist folder with harp compile, it gives me this error:
{
"source": "Less",
"dest": "CSS",
"filename": "/Users/***/lib/fontawesome/less/bordered-pulled.less",
"lineno": 4,
"name": "NameError",
"message": "variable #fa-css-prefix is undefined",
"stack": "// Bordered & Pulled\n// -------------------------\n\n.#{fa-css-prefix}-border {\n padding: .2em .25em .15em;\n border: solid .08em #fa-border-color;\n border-radius: .1em;\n}\n\n.pull-right { float: right; }\n.pull-left { float: left; }\n\n.#{fa-css-prefix} {\n &.pull-left { margin-right: .3em; }\n &.pull-right { margin-left: .3em; }\n}\n"
}
This error is happening because HarpJS is trying to compile the LESS files that came with the font-awesome's bower package. After some research, I found this answer, which points me to a page of the font-awesome documentation that says:
Page: http://fontawesome.io/get-started/#custom-less
Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the #fa-font-path or $fa-font-path variable to point to your font directory.
Example:
#fa-font-path: "../font";
But I can't edit any file like this, since my dependencies are installed using bower and I don't check them in the repo. Even if I did check them in, that change would be overriden as soon as someone uses bower install to get an updated version of font-awesome.
What workaround would you use for this situation?
TIP: You can reproduce this just by doing:
$ mkdir test
$ cd test
$ bower init
$ bower install --save font-awesome
$ harp compile . dist
I just did some research around this issue and I believe the easiest way to fix this issue is by specifying a custom bower_components directory.
Found in this answer a way to do just that:
Create a file .bowerrc in the project root with the content:
{
"directory" : "_bower_components"
}
Run bower install again.
Harp doesn't compile directories/files that start with underscore (_), so if you name the directory _bower_components, it will successfully ignore it.
The problem with this approach is that those files will not be public, so you might have to create a new public file that imports the file(s) from font-awesome.
Something like:
#import "_bower_components/font-awesome/css/font-awesome.css"
There's a ticket open in harp’s issues where they're trying to find a way to ignore files or directories (similar to .gitignore), but it hasn't been implemented yet.
You might still have to figure out what to do with the font files. Hope it helps in any way to move you forward.
I downloaded bootstrap 3.0 and can't get the glyphicons to work. I get some kind of "E003" error. Any ideas why this is happening? I tried both locally and online and I still get the same problem.
I was having the same issue and couldn't find any information about it except in the hidden comments on this page. My font files were loading just fine according to Chrome, but the icons weren't displaying properly. I'm making this an answer so it will hopefully help others.
Something was wrong with the font files that I downloaded from Bootstrap 3's customizer tool. To get the correct fonts, go to the Bootstrap homepage and download the full .zip file. Extract the four font files from there to your fonts directory and everything should work.
Note to readers: be sure to read #user2261073's comment and #Jeff's answer concerning a bug in the customizer. It's likely the cause of your problem.
The font file isn't being loaded correctly. Check if the files are in their expected location.
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
As indicated by Daniel, it might also be a mimetype issue. Chrome's dev tools show downloaded fonts in the network tab:
In my case I was getting a 404 for glyphicons-halflings-regular.woff, and non visible glyphicons on mobile browsers.
Looks like there is some confusion about the MIME type for woff, more than one MIME type being accepted by different browsers, but the W3C says:
application/font-woff
Edit: After testing the following MIME type for woff works on all browsers currently:
application/x-font-woff
Edit: Latest version of Bootstrap at this time (3.3.5) uses .woff2 fonts with the same initial result as .woff, the W3C still defining the spec but at the moment the MIME type seems to be:
application/font-woff2
-If you followed the highest rated answer and it's still not working:
The Font folder MUST be on the same level as your CSS folder. Fixing the path in bootstrap.css will not work.
Bootstrap.css has to navigate to the Fonts folder exactly like this:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
If the other solutions aren't working, you may want to try importing Glyphicons from an external source, rather than relying on Bootstrap to do everything for you. To do this:
You can either do this in HTML:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Or CSS:
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")
Credit to edsiofi from this thread: Bootstrap 3 Glyphicons CDN
In case someone else ended up here and using Bootstrap >= v4.0: glyphicon support is dropped
The relevant part from the release notes:
Dropped the Glyphicons icon font. If you need icons, some options are:
the upstream version of Glyphicons
Octicons
Font Awesome
Source: https://v4-alpha.getbootstrap.com/migration/#components
If you want to use glyphicons you need to download it separately.
I personally tried Font Awesome and it is quite good. Adding icons is similar to glypicon way:
<i class="fas fa-chess"></i>
I was looking through this old question of mine and since what was supposed to be the correct answer up until now, was given by me in the comments, I think I also deserve the credit for it.
The problem lied in the fact that the glyphicon font files downloaded from bootstrap's customizer tool were not the same with the ones that are downloaded from the redirection found at bootstrap's homepage. The ones that are working as they should are the ones that can be downloaded from the following link:
http://getbootstrap.com/getting-started/#download
Anyone having problems with old bad customizer files should overwrite the fonts from the link above.
You can add this line of code and done.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Thanks.
Azure Websites are missing woff MIME configuration. You must add following entry into web.config
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
</configuration>
As #Stijn described, the default location in Bootstrap.css is incorrect when installing this package from Nuget.
Change this section to look like this:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('Content/fonts/glyphicons-halflings-regular.eot');
src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
IIS will not server .woff files by default, so in IIS you'll need to add a <mimeMap> entry to your web.config file;
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".woff" mimeType="application/x-woff" />
</staticContent>
</system.webServer>
</configuration>
Do you have all below files in your fonts directory
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
I modified my less variables.less file
I modified the variable
#icon-font-path: "fonts/";
the original was
#icon-font-path: "../fonts/";
It was causing a problem
This is due to wrong coding in bootstrap.css and bootstrap.min.css. When you download Bootstrap 3.0 from the Customizer the following code is missing:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
Since this is the main code for using Glyphicons, it won't work ofc...
Download the css-files from the full package and this code will be implemented.
This was the reason, why the icons didn't show up for me:
* {
arial, sans-serif !important;
}
After i have removed this part of my CSS, everything worked like it should. The !important was the one causing trouble.
Another problem/solution may be having this Bootstrap 2.x code:
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
and when migrating based on the guide (.icon-* ---> .glyphicon .glyphicon-*):
<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>
you forget to add the icon class (containing the font reference):
<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
Below is what fixed it for me. I was getting "bad URI" error using in Firebug console. The icons were showing up as E### numbers. I had to add a .htaccess file in my 'fonts' directory.
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Possible duplicate of: Downloadable font on firefox: bad URI or cross-site access not allowed
This is very much a long shoot, but it was my case and since it is not here already.
If you are compiling Twitter Bootstrap from SASS using gulp-sass or grunt-sass ie. node-sass. Make sure your node modules are up to date, especially if your are working on a rather old project.
It turns out that as of some time back the SASS directive #at-root is used in the definition of the #font-face in glyphicons, see https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss.
The gotcha here is that node-sass ie. libsass do not support the #at-root directive if it is too old. If this is the case you will get a #font-face wrapped in a #at-root which the browser have no idea what to do with. The result of this is that no font will be downloaded and you will likely see garbage instead of icons.
Note: below is likely a niche scenario, but I wanted to share it in case someone else might find it useful.
In a rails project, we are reusing quite a bit through a gem that is a Rails engine using bootstrap-sass. All was well in the main project with the exception of the glyphicon font path resolution.
GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found)
We found that $bootstrap-sass-asset-helper was false during the resolution when we expected it to be true, so the path was different.
We caused the $bootstrap-sass-asset-helper to be initialized in the engine gem by doing:
// explicit sprockets import to get glyphicon font paths correct
#import 'bootstrap-sprockets';
#import "bootstrap/variables";
e.g. this caused the path to resolve to:
/assets/bootstrap/glyphicons-halflings-regular.woff
Again, this shouldn't be necessary in any normal rails project using bootstrap-sass, we just happen to be reusing a lot of views and this worked out for us. Hopefully this can assist someone else.
Here is what official documentation says regarding fonts not rendering.
Changing the icon font location
Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:
Change the #icon-font-path and/or #icon-font-name variables in the source Less files.
Utilize the relative URLs option provided by the Less compiler.
Change the url() paths in the compiled CSS.
Use whatever option best suits your specific development setup.
Other than that it could be that you missed to copy the fonts folder to the root directory
I had this problem and it was caused by the variables.less file. Overriding it to set the icon-font-path value solved the problem.
The file structured looks like this:
\Content
\Bootstrap
\Fonts
styles.less
variables.less
Adding my own variables.less file in the root of Content and referencing this in styles.less resolved the 404 error.
Variables.less contains:
#icon-font-path: "fonts/";
I got Bootstrap from NuGet. When I published my site the glyphs didn't work.
In my case I got it working by setting the Build Action for each of the font files to 'Content' and set them to 'Copy Always'.
i had a box width code \e094 for glyphicon-arrow-down, in fact i solved the problem adding glyphicon in css class like that :
<i class="glyphicon glyphicon-arrow-down"></i>
if it could help someone ...
Make sure you aren't over specifying the font family, for example
*{font-family: Verdana;}
will remove the halflings font from i elements.
I was having the same problem where the browser was unable to find the font files, and my issue was due to exclusions in my .htaccess file that was whitelisting files that shouldn't be sent to index.php for processing. As the font file couldn't be loaded the characters were replaced with BLOB.
RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]
As you can see, files like images, rss, and xml are excluded from the rewrite, but the font files are .woff and .woff2 files, so these also needed adding to the whitelist.
RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]
Adding woff and woff2 to the whitelist allows the font files to be loaded, and the glyphicons should then display properly.
You must to set by this order:
<link rel="stylesheet" href="path/bootstrap.min.css">
<style type="text/css">
#font-face { font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); }
</style>
What worked for me was replacing routes from:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
to
#font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/glyphicons-halflings-regular.eot');
src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
This is how you include the icon in bootstrap 3
<span class="glyphicon glyphicon-bell"></span>
http://glyphicons.bootstrapcheatsheets.com/
Hope that helps.
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}
I am using bootstrap with namespace and glyphicons not working but after adding above line in code glyphicons working fine.
I just renamed the font from bootstrap.css using Ctrl+c, Ctrl+v and it worked.
I started using the asset_sync gem in order to use Amazon S3 as a CDN asset host (I am using Heroku and RoR). All of my assets are loading correctly, except for the icons I am using through Twitter Bootstrap (There is just a blank space where the icon should be).
I tried using Heroku's multiple asset pre-processor support:
app/assets/stylesheets/custom.css.scss.erb
background-image: url(<%= asset_path "../img/glyphicons-halflings.png"%>);
I also tried moving the glyphicons-halflings.png directly into the images folder and referencing it there:
app/assets/stylesheets/custom.css.scss.erb
background-image: url(<%= asset_path "/assets/glyphicons-halflings.png"%>);
app/assets/stylesheets/custom.css.scss
background-image: url("/assets/glyphicons-halflings.png");
However, I've haven't found a way to make it work. Any suggestions on how to get the Twitter Bootstrap icons to work successfully with S3/Heroku would be greatly appreciated.
EDIT: I am using: gem 'bootstrap-sass', '~> 2.0.2'
If you are using gem 'bootstrap-sass', the following is a solution that worked for me.
First, download bootstrap from the bootstrap website. Extract the two icon .png files (glyphicons-halflings.png and glyphicons-halflings-white.png) and copy them into your apps image directory (app/images).
In your custom.css.scss file (this could be a different name depending on your app) enter the following at the top of your stylesheet (before you import bootstrap) to override the icon image path:
$iconSpritePath: url('/assets/glyphicons-halflings.png');
$iconWhiteSpritePath: url('/assets/glyphicons-halflings-white.png');
#import "bootstrap";
Use the Rails image helper for example:
background-image: image-url("glyphicons-halflings.png");
You can also check your search path in the Rails console with:
Rails.application.config.assets.paths
Good luck!
Have you set your asset host?
https://devcenter.heroku.com/articles/cdn-asset-host-rails31#configuration
Did you check the background-image URL that is actually used? I had the same behavior when I tried to test the CDN in my development enviroment. Turns out, somehow the wrong bucket was used in the application.css
For anyone not using the bootstrap-sass gem I finally got mine working by changing the default bootstrap css file extension to scss and editing the following piece of code to use the rails asset_url method. Just search for #font-face in the code and try this.
#font-face {
font-family: 'Glyphicons Halflings';
src: asset_url('glyphicons-halflings-regular.eot');
src: asset_url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), asset_url('glyphicons-halflings-regular.woff') format('woff'), asset_url('glyphicons-halflings-regular.ttf') format('truetype'), asset_url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Commit and push to heroku. Worked for me. Hope this helps someone