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...
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 Angular Bootstrap in my project for styling. When I am using ngbDropdown, the Dropdownlist is always shown below the actual dropdown item:
This is the HTML I am using:
<div ngbDropdown class="d-block" id="tedder-select">
<button class="btn btn-primary w-100" id="dropdown-tedder" (click)="scrollToTedder()"
ngbDropdownToggle>{{selectedTedder}}</button>
<div ngbDropdownMenu aria-labelledby="dropdown-tedder">
<button ngbDropdownItem *ngFor="let tedder of tedders"
(click)="selectTedder(tedder)">{{tedder}}</button>
</div>
</div>
In index.html I am adding the following scripts/css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
My Dependencies in package.json:
"dependencies": {
"#angular/animations": "~10.1.3",
"#angular/cdk": "^10.2.7",
"#angular/common": "~10.1.3",
"#angular/compiler": "~10.1.3",
"#angular/core": "~10.1.3",
"#angular/forms": "~10.1.3",
"#angular/localize": "~10.1.3",
"#angular/material": "^10.2.7",
"#angular/platform-browser": "~10.1.3",
"#angular/platform-browser-dynamic": "~10.1.3",
"#angular/platform-server": "~10.1.3",
"#angular/router": "~10.1.3",
"#ng-bootstrap/ng-bootstrap": "^8.0.0",
"#nguniversal/express-engine": "^10.1.0",
"angular-in-memory-web-api": "~0.11.0",
"bootstrap": "^4.5.0",
"express": "^4.15.2",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.1100.2",
"#angular/cli": "~10.1.3",
"#angular/compiler-cli": "~10.1.3",
"#nguniversal/builders": "^10.1.0",
"#types/express": "^4.17.0",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-marbles": "~0.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.3"
}
Thank's for your help!
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
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.