So I have this Yeoman angular fullstack MEAN project where I have added the material design icons to my bower_components. however this is not automaticly added to my index.html page like all my other .css files.
Is there a way to make this happen, because at the moment whenever I start my project I have to add the reference to the .css file manually.
my index.html looks like this
<head>
...
<!-- build:css(client) app/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,client}) app/app.css -->
<link rel="stylesheet" href="app/app.css">
<!-- injector:css -->
<link rel="stylesheet" href="app/account/login/login.css">
<link rel="stylesheet" href="app/admin/admin.css">
<link rel="stylesheet" href="app/app.css">
<link rel="stylesheet" href="app/impression/impression.css">
<link rel="stylesheet" href="app/information/information.css">
<link rel="stylesheet" href="app/main/main.css">
<link rel="stylesheet" href="app/shop/shop.css">
<link rel="stylesheet" href="app/turnament/turnament.css">
<link rel="stylesheet" href="components/modal/modal.css">
<!-- endinjector -->
<!-- endbuild -->
</head>
I whould like it to look like this
<head>
...
<!-- build:css(client) app/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bower_components/mdi/css/materialdesignicons.css" />
<!-- endbower -->
...
</head>
EDIT
bower_component/mdi/bower.json
{
"name": "mdi",
"version": "1.1.70",
"main": [
"css/materialdesignicons.css",
"fonts/*",
"css/*",
"scss/*",
"package.json",
"preview.html"
],
"homepage": "http://materialdesignicons.com",
"authors": [
{ "name": "Austin Andrews", "homepage": "http://templarian.com" },
{ "name": "Google", "homepage": "http://www.google.com/design" }
],
"license": ["OFL-1.1", "MIT"],
"ignore": [
"*.md",
"*.json"
],
"keywords": [
"material",
"design",
"icons",
"webfont"
]
}
/bower.json
{
"name": "lunorth",
"version": "0.0.0",
"dependencies": {
"angular": ">=1.2.*",
"json3": "~3.3.1",
"es5-shim": "~3.0.1",
"jquery": "~1.11.0",
"bootstrap": "~3.1.1",
"angular-resource": ">=1.2.*",
"angular-cookies": ">=1.2.*",
"angular-sanitize": ">=1.2.*",
"angular-route": ">=1.2.*",
"angular-bootstrap": "~0.11.0",
"font-awesome": ">=4.1.0",
"lodash": "~2.4.1",
"angular-socket-io": "~0.6.0",
"angular-animate": "~1.4.2"
},
"devDependencies": {
"angular-mocks": ">=1.2.*",
"angular-scenario": ">=1.2.*"
}
}
It looks like you're missing Material Design Icons from the list of dependencies in your projects bower.json file.
If you add the name and version to your dependencies it will fix your issue.
"dependencies": {
"mdi": "1.1.70",
...,
...
}
If you installed the package via the command line you can use --save to add it to your project dependencies.
Another common problem with wiredep is the missing package's bower.json file is missing the 'main' property.
Related
This question already has answers here:
How to add a browser tab icon (favicon) for a website?
(13 answers)
Closed 7 months ago.
I would like to know how to add my upcoming website logo as an icon to every tab. Where exactly does it fit in in the <head> space. Can I have a simple example of a simple html page with this?
Insert the following code in the <head> section of your pages:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
site.webmanifest:
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
You are talking about Favicon.
You can use a Favicon by adding something like this in your <head> tags.
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
You can place it wherever you want in the <head> tags.
Here's an exaple:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<p>Page content</p>
</body>
</html>
I am using prime ng and I can't get the controls to appear with the icons. All I'm getting are boxes but when I use fontawesome outside the prime controls, everything works fine.
I uses NPM to install.
Here is my
index.html page
<!DOCTYPE html>
<html>
<head lang="en">
<base href="/" >
<title>Acme Product Management</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="assets/scripts/angular.min.js"></script>
<script src="assets/scripts/angular-route.min.js"></script>
<script src="assets/scripts/angular-local-storage.min.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<link href="node_modules/#angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/CustTheme1/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/css/custom.css">
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<pm-app></pm-app>
<script src="assets/scripts/jquery-3.1.1.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
**Package.json**
{
"name": "product-management",
"version": "1.0.0",
"author": "Deborah Kurata",
"description": "Package for the Acme Product Management sample application",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"#angular/common": "^2.4.9",
"#angular/compiler": "^2.4.9",
"#angular/core": "^2.4.9",
"#angular/forms": "^2.4.9",
"#angular/http": "^2.4.9",
"#angular/material": "^2.0.0-beta.2",
"#angular/platform-browser": "^2.4.9",
"#angular/platform-browser-dynamic": "^2.4.9",
"#angular/router": "^3.4.9",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"primeng": "^2.0.3",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.2.0",
"systemjs": "^0.20.9",
"zone.js": "^0.7.7"
},
"devDependencies": {
"concurrently": "^3.4.0",
"lite-server": "^2.2.0",
"tslint": "^4.5.1",
"typescript": "^2.0.2",
"typings": "^2.1.0"
},
"repository": {}
}
I had boxes appear in place of FontAwesome icons once because I overwrote the font-family attribute with "Open Sans" (my font family for the rest of the app)
It was overwriting the FontAwesome's default font-family of "FontAwesome" with Open Sans, so all the icons appeared as boxes.
I would verify that your font-family attribute for FontAwesome isnt being overwritten somewhere. Hopefully that solves it...
I have a codeigniter application where I am trying to implement the design I have currently implemented the design but some of the functionality is not working due to the sass not getting called I was wondering if anyone knows where I should be placing the sass folder and or if I should be altering the css files to call the sass.
Any help would be appreciated, thanks
My call to the css is as follows:
<link href="<?=base_url()?>public/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<link href="<?=base_url()?>public/assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="<?=base_url()?>public/assets/global/css/components-md.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="<?=base_url()?>public/assets/global/css/plugins-md.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<link href="<?=base_url()?>public/assets/layouts/layout4/css/layout.min.css" rel="stylesheet" type="text/css" />
<link href="<?=base_url()?>public/assets/layouts/layout4/css/themes/light.min.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="<?=base_url()?>public/assets/layouts/layout4/css/custom.min.css" rel="stylesheet" type=
I also have the sass just placed in the public/assets folder.
Your application should not be calling the SASS file. Instead app should call the CSS - compiled from the SASS.
I was wondering if anyone knows where I should be placing the sass
folder and or if I should be altering the css files to call the sass.
You can actually place it on any folder and when compiled will be placed in your assets folder.
I am having some troubles installing PrimeNG properly to use its rich text editor. I've installed everything I would need and it still doesn't work.
Here is my package.json :
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/forms": "0.3.0",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "2.0.0-rc.1",
"#angular/router-deprecated": "2.0.0-rc.1",
"#angular/upgrade": "2.0.0-rc.1",
"angular2-in-memory-web-api": "0.0.11",
"bootstrap": "^3.3.6",
"core-js": "^2.4.0",
"lodash": "^4.15.0",
"ng2-dropdown": "0.0.12",
"primeng": "^1.0.0-beta.13",
"primeui": "^4.1.15",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}
}
My typings.json :
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
"node": "registry:dt/node#4.0.0+20160509154515"
},
"dependencies": {
"lodash": "registry:npm/lodash#4.0.0+20160723033700"
}
}
My index.html :
<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<title>My page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
<link rel="stylesheet" href="/assets/css/styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/zone.js#0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata#0.1.3"></script>
<script src="https://npmcdn.com/systemjs#0.19.27/dist/system.src.js"></script>
<script src="node_modules/primeui/primeui-ng-all.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
So I called {EditorModule, SharedModule} in directives of both my app.components.ts and the component where I want to see this;
<p-editor [style]="{'height':'320px'}">
<header>
<span class="ql-format-group">
<span title="Bold" class="ql-format-button ql-bold"></span>
<span class="ql-format-separator"></span>
<span title="Italic" class="ql-format-button ql-italic"></span>
<span class="ql-format-separator"></span>
<span title="Underline" class="ql-format-button ql-underline"></span>
<span class="ql-format-separator"></span>
<span title="Strikethrough" class="ql-format-button ql-strike"></span>
</span>
</header>
</p-editor>
I searched everywhere in this forum but couldn't figure out how to solve this probleme. Can someone please suggest anything? Thanks!
I had a lot of trouble gettings things like the calendar to run. I finally solved it by looking at the demo sample index.html and making sure I was loading all of the scripts they load. There are dependencies on primeUI and jquery, etc. There are plenty:
<link id="themeStyleSheet" rel="stylesheet" type="text/css" href="vendor/primeui/themes/pepper-grinder/theme.css" />
<link rel="stylesheet" type="text/css" href="vendor/primeui/primeui-ng-all.min.css" />
<link rel="stylesheet" href="../app/app.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="vendor/core-js/client/shim.min.js"></script>
<script src="vendor/zone.js/dist/zone.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>
<!-- sweet alert -->
<script src="vendor/ng2-sweetalert2/node_modules/sweetalert2/dist/sweetalert2.min.js"></script>
<!-- Datetimepicker, Slider, Schedule -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.min.js"></script>
<!-- CodeHighligther -->
<script src="../app/resources/js/prism.js" data-manual></script>
<!-- Charts.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<!-- Schedule -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.2/fullcalendar.min.js"></script>
<!-- InputMask -->
<script src="../app/resources/js/jquery.inputmask.bundle.js"></script>
My manifest.json is:
{
"manifest_version": 2,
"name": "Test",
"version": "1.0.0",
"web_accessible_resources": [
"public/*"
]
}
public/base.htm is:
<style>
body {
background-image:url('chrome-extension://__MSG_##extension_id__/background.png');
}
</style>
<link rel="stylesheet" href="chrome-extension://__MSG_##extension_id__" type="text/css" />
<link rel="stylesheet" href='chrome-extension://##extension_id/public/style_override.css' type="text/css" />
Whenever I am visiting view-source:chrome-extension://omjmnflgeadkeenialehggjcffaeonam/public/base.htm I am getting:
<style>
body {
background-image:url('chrome-extension://__MSG_##extension_id__/background.png');
}
</style>
<link rel="stylesheet" href="chrome-extension://__MSG_##extension_id__" type="text/css" />
<link rel="stylesheet" href='chrome-extension://##extension_id/public/style_override.css' type="text/css" />
I don't understand why these are not replaced by the chrome extension id.
Update: Just noticed it apparently works only with CSS format. Chrome don't allow inline JS. So I am still looking for an option to import external CSS/JS in this html page