Bootstrap-sass 3.3.6 + Bower = no glyphicon - javascript

I've installed in my project "bootstrap-sass": "~3.3.6"through Bower. In my index.html I've got injected autoamticaly this:
<script src="bower_components/bootstrap-sass/assets/javascripts/bootstrap.js"></script>
and in my style.scss I put this:
#import '../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap';
What am I missing to get glyphicons working?

glyphicons is a fonts that instead of showing chars its shows vector images
so in order to show the icon you need, beside adding the sass, make sure that the font on the dist folder is in the relative path so that the css #font-face will load properly
you can check the path by open the network (in chrome) and you should see an error of 404 for the font path

Related

Favicon won't load and throws error in console

What work-arounds are available for this aside from updating the assets import in the angular.json file and adding an images folder in the assets directory?
I'm aware that there are a number of posts around this. And I have solved the issue in my app. But it seems that you cannot access a favicon reliably from the src folder in an Angular app. In adding an images folder to the assets directory in the app, and accessing an icon or graphic from there...the app loads the app icon every time.
My current working solution:
Add an images folder to the ./assets directory in your app. Place the image/icon in this folder and access it from there.
Google favicon generator and make an icon. Name it favicon.ico and drop it in your webroot.
See if this helps.
Also here is a tutorial on favicon: https://www.w3.org/2005/10/howto-favicon

How to host popper.js locally

I just upgraded to Bootstrap four and realized Popper.js was a dependency. I like to host libraries locally, as I sometimes need to work offline, but when I try to use it offline, I get an error unexpected token export. It works, however, when I use the Cloudflare CDN version, but how can I host popper.js locally?
(I don't want to use a package manager for this.)
The README.md of the project will help sort this out:
Dist targets
Popper.js is currently shipped with 3 targets in mind: UMD, ESM and ESNext.
UMD - Universal Module Definition: AMD, RequireJS and globals;
ESM - ES Modules: For webpack/Rollup or browser supporting the spec;
ESNext: Available in dist/, can be used with webpack and babel-preset-env;
Make sure to use the right one for your needs. If you want to import it with a <script> tag, use UMD.
Hence, if you want to use Popper.js with a <script /> tag, you want to use the umd version of it. Located in dist/umd.
you can use bootstrap.bundle.min.js which already contain Popper.js
I also tried downloading popper and I tried to recreate your problem, and you are correct.
If you check the Quick Start section of getbootstrap.com page, you can find the following line in their example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
Note the umd part in their link. You can download that file and add it locally and it will work.
PS - You may also have to change your jQuery import.
Download the official bootstrap files by clicking the first link on this page:
https://getbootstrap.com/docs/4.5/getting-started/download/
You can then use the bootstrap.bundle.min.css file in css which contains popper.js as well as the bootstrap code you might need
you can use it by using this code in your <head> tag:
<link rel="stylesheet" type="text/css" href="path-to/bootstrap-4.5.0/css/bootstrap.bundle.min.css">
I included 4.5.0 because that is the current version of bootstrap out there today
If you download Popper.js though
npm install popper.js
I found there are difference between npm package and its original source which is here https://popper.js.org/.
I just download popper.js from its original source and put it new js file. It worked for me.
Just download the source code and refer to it
Get the source code from the github page, then refer to it in your html
<script type="text/javascript" src="/path/to/downloaded/popper.js-1.12.5/dist/poppper.js" />
go to : https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
the right click and "save as..."
you can do the same with :
https://cdnjs.cloudflare.com/ajax/libs/popper.js/[popper-version]/umd/popper.js
and then in your code you add this line at the bottom between Jquery's and Bootstrap's .js link (script) :

Webpack proper bootstrap loading with extract-text-webpack-plugin

I am trying to bundle css files with webpack extract-text-webpack-plugin it works great with local files that are int (projects)/src/assets/styles, but I also need bootstrap.css from node_modules and if I try adding it to import b from 'bootstrap/dist/css/bootstrap.css'; the plugin just throws an error that sounds something like this "bootstrap.css Unexpected token (7:5) You may need an appropriate loader to handle this file type." If I add '!style!css!' as described in this question
Webpack Error while including bootstrap 3 it does work, but now it is injected in index.html which may slowdown the overall app. So how do you correctly load the bootstrap style from node_modules? I tried copying it with copy-webpack-plugin, but the copying is performed after the loaders have done their job. so any suggestions?
With a bit more research and debuging the problem was in css loader path, which was pointed to the app source directory, that is why it could not access the node_modules.

Linking to assets in the public folder in Meteor.js and Telescope

I am using Telescope on Meteor and I am having trouble accessing anything that's in my public folder. In my Meteor app I have a package that has a public folder - that has images/fonts that I am failing to link to properly.
I am new to Meteor and Telescope so I think I am messing up something basic. These is what I am working with:
File structure path to /public:
MyApp/Packages/ThemeName/public/
Which contains three folders: icons, images, and fonts.
To link to my fonts in my CSS, I am using #font-face:
#font-face {
font-family: Neuzeit;
src:
url("/fonts/neuzeit-book.css"),
url("/fonts/neuzeit-book.eot"),
url("/fonts/neuzeit-book.svg"),
url("/fonts/neuzeit-book.ttf"),
url("/fonts/neuzeit-book.woff");
}
body {
font-family: Neuzeit;
}
But these fonts don't load and I receive an error in my console: Failed to decode downloaded font: http://localhost:3000/fonts/neuzeit-book.ttf [index:1]. I get this for each of those sources. Additionally, I have also attempted to link to images in my templates within the same package:
<img src="/icons/icon-close.png" />
But then I get a broken link icon instead of that image on the page - and oddly, no 404 for the image in the console.
Is this a permissions issue? I have referred to this SO article but this ended up being irrelevant as I believe I'm writing the correct paths right? Please advise!
/public needs to be at the root of your app, not under /Packages/ThemeName/public/
You are linking to the wrong URL:
Instead of this:
url("/fonts/neuzeit-book.css")
It should be something like this:
url("/packages/your-theme-name/public/fonts/neuzeit-book.css")
But you should make sure that it is being included via addFiles() in your package.js file

CSS not loading for React Foundation Apps

I have installed React Foundation Apps according to the docs:
http://webrafter.com/opensource/react-foundation-apps/install
I had to fiddle with the webpack.config.js file to make it parse .jsx files but now the module is working, except that no CSS is added. I'm trying to use the Modal but it just shows up on the page with no styling applied.
What can I have missed?

Categories

Resources