How to use fontawesome in ionic 2 rc0 as there is no gulp/grunt file so I can add file into build process?
Here's an article i came across while searching on this same topic.
https://chriztalk.com/ionic-2-font-awesome-using-sass/
Here's a gist:
Make a new config directory the root of your ionic 2 project:
$ mkdir config
Find the copy.config.js and sass.config.js files into this folder: /node_modules/#ionic/app-scripts/config/ and copy them into the folder you just created.
Add these lines to the new copy.config.js in config directory you just created.
...
copyFontAwesomeCSS: {
src: '{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css',
dest: '{{WWW}}/assets/css/'
},
copyFontAwesome: {
src: '{{ROOT}}/node_modules/font-awesome/fonts/**/*',
dest: '{{WWW}}/fonts/'
},
...
Add these lines to the includePaths[] block of the sass.config.js file in the config directory you just created:
...
includePaths: [
...
'node_modules/font-awesome/scss',
...
],
...
Add a config block in your package.json file with the following references:
...
"config": {
"ionic_copy": "./config/copy.config.js",
"ionic_sass": "./config/sass.config.js"
},
....
Import font-awesome in your app.scss file:
...
#import 'font-awesome';
...
Finally, use font awesome like you would in any html file:
<h1><i class="fa fa-flag" aria-hidden="true"></i> Font Awesome</h1>
There is still a lot of confusion on what is a best practice when it comes to adding FontAwesome to an ionic2 app, so I wrote an article about it to mitigate some of that confusion. I hope this helps anybody else looking for a correct answer
http://luiscabrera.site/tech/2017/01/09/fontawesome-in-ionic2.html
Simply add cdn css link of font awesome to your index.html
Or you can use #import of sass to add it to your project
#import 'lib/fa.css'
Related
I am trying to add the plugin: nativescript-fonticon
I am currently stuck on the part where I have to convert the css file.
In the readme it states that I have to configure my css and converter before I can start converting:
import * as application from 'application';
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';
TNSFontIcon.debug = true; <-- Optional. Will output the css mapping to console.
TNSFontIcon.paths = {
'fa': 'font-awesome.css',
'ion': 'ionicons.css'
};
TNSFontIcon.loadCss();
application.resources['fonticon'] = fonticon;
application.start({ moduleName: 'main-page' });
How am I supposed to do this in nativescript-vue?
You look like you're on the right track. You should put the initialising code in your main.js file (or whatever the entry point file is named).
Here's how to get it to work in NativeScript-Vue.
Download and extract fontawesome-free-5.9.0-web.zip from here.
Add webfonts/fa-brands-400.ttf, webfonts/fa-regular-400.ttf and webfonts/fa-solid-900.ttf to app/fonts directory.
Add css/fontawesome.css to app/assets directory. Remove any non fa-*:before classes from this file.
In your app's main.js. You should see a console log for each class when starting your app.
import { TNSFontIcon, fonticon } from 'nativescript-fonticon'
TNSFontIcon.debug = true
TNSFontIcon.paths = {
'fa': './assets/fontawesome.css',
}
TNSFontIcon.loadCss()
Vue.filter('fonticon', fonticon)
In your app's main css file, e.g. app.scss.
.fa-brands {
font-family: "Font Awesome 5 Brands", "fa-brands-400";
}
.far {
font-family: "Font Awesome 5 Free", "fa-regular-400";
font-weight: 400;
}
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
font-weight: 900;
}
Now use them in your view.
<Label :text="'fa-facebook-f' | fonticon" class="fa-brands" />
<Label :text="'fa-eye' | fonticon" class="far" />
<Label :text="'fa-eye' | fonticon" class="fas" />
I have found a blog that actually uses the fonticons plugin and how to use it:
https://nativescript-vue.org/blog/using-fonticons/
EDIT:
After a few Nativescript and Nativescript-Vue updates it does not seem to work properly. It's rather hard to use.
I suggest importing the font and using the respective unicodes like this:
Data:
icon: '\ue905'
Markup:
<Label class="ico" :text="icon"/>
The problem is that my index.html won't load a css file from a sister folder. I've tried a variety of Browsersync options and none worked.
Into my second day trying to figure this out. I'm working in the Flask framework for Python which works something like Laravel, etc. My task manager is Gulp, front end framework is Foundation 6. I'm new to Flask and Gulp. I used to use Grunt and Livereload with Laravel some years ago and had scss and browser reload working then. Memory fades though.
My file structure is supposed to be typical Flask, just the relevant folders here:
-root
-app
-static
-css
-js
-templates (html files)
-foundation (scss files and framework)
Browsersync seems to be designed so you have to have css under the html files. I've tested this with an index.html in the /root and /app folders and it works. However, I need / want the html in /templates.
In /app/templates/index.html:
<link rel="stylesheet" href="../static/css/app.css">
I'm using both command line for Browsersync and Gulp.js files in the root and in /foundation.
The Browsersync server will serve html from /templates if I set it up with "app/templates" but then it can't find the css. If I move /static/css into /templates the proper index.html file is rendered nicely in the browser. So Browsersync works with the old pre-app framework layout. It just can't deal with paths to sister folders.
gulp.task('serve', ['scss'], function() {
browserSync({
server: "app"
});
gulp.watch(src.css, ['scss']);
gulp.watch(src.html).on('change', reload);
});
I've considered their proxy option but so far can't find a solution with that. I haven't found many setup examples online and none were useful.
For now I'm just doing desktop layout of the app's html pages with Foundation 6 and haven't set up a dev server, just a folder on my MBP.
Any ideas? Please :-)
You can provide multiple base directories from which to serve static files
server: {
baseDir: ["app/templates", "static"]
}
this will server app/templates/index.html by default and then in your html just use
<link rel="stylesheet" href="/css/app.css">
This is my final working gulpfile.js in the site root and setup to work with Flask or most other application frameworks plus Foundation 6. Hope this example saves someone a day or more of figuring this out. I'll add js files later.
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var reload = browserSync.reload;
var src = {
scss: 'foundation/scss/*.scss',
css: 'app/static/css/app.css',
allscss: 'foundation/scss/**/*.scss',
cssdest: 'app/static/css',
html: 'app/templates/*.html'
};
var sassPaths = [
'foundation/bower_components/foundation-sites/scss'
//'foundation/bower_components/motion-ui/src'
];
gulp.task('serve', ['sass'], function() {
browserSync({
open: false,
server: {
baseDir: ["app/templates", "app/static"]
}
});
gulp.watch([src.scss, src.allscss], ['sass'])
gulp.watch(src.html).on('change', reload);
gulp.watch(src.css).on('change', reload);
});
gulp.task('sass', function() {
return gulp.src(src.scss)
.pipe($.sass({
includePaths: sassPaths
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest(src.cssdest))
});
gulp.task('default', ['serve']);
some one know if its likely use custom directory for "templatetags" eje: "my-project/templatetags"
Normal
My-Project-Name
My-App
__init__.py
templatetags
__init__.py
Need Some Like This
My-Project-Name
templatetags
__init__.py
This is possible. Just add location of your templatetags.py or templatetags directory to Django settings.py into OPTIONS in TEMPLATES setting.
In my case I put my templatetags in the libs/ directory that is located in project root dir.
You have two options, builtins or libraries:
TEMPLATES = [{
...
'OPTIONS': {
...
'builtins': [
'libs.templatetags'
],
# or as #x-yuri pointed out, you can put them in `libraries`
'libraries': {
'my_tags': 'libs.templatetags',
},
}
}]
If you use builtins, it is available everywhere and you don't need to use {% load %} for that.
If you use libraries you need to use {% load my_tags %}.
This is not possible. The reason being, templatetags must reside inside a django app.
From the documentation of templatetags:
Custom template tags and filters must live inside a Django app. If
they relate to an existing app it makes sense to bundle them there;
otherwise, you should create a new app to hold them.
The app should contain a templatetags directory, at the same level as
models.py, views.py, etc. If this doesn’t already exist, create it -
don’t forget the __init__.py file to ensure the directory is treated
as a Python package. After adding this module, you will need to
restart your server before you can use the tags or filters in
templates.
I've successfully precompiled handlebars into one file using grunt-ember-templates, however, when including source in html file:
<script src="templates/app/compiledTemplates.js" type="text/javascript"></script>
It says this:
Resource interpreted as Script but transferred with MIME type text/plain: "file:///Users/jaime/voyant-svn/voyant-blocks/dev/blocks-web/src/main/webapp/templates/app/compiledTemplates.devjs".
What is the proper way of including precompiled handlebar templates?
I combine the compiled templates with my other scripts (jQuery/ember/ember-data/my app code) using grunt. Then in my index.html I simply include the single js script (helps cut down on the number of http requests also).
I'm currently using grunt for this, a simple "build" step might look something like the below. To use this you would need to install nodejs. Next you would npm install the following
grunt
grunt-cli
grunt-ember-template-compiler
grunt-contrib-concat
Once you have these installed you can run the build below from your root if you put the js into a file called "Gruntfile.js" -then simply execute "grunt" and it will output a deps.min.js (w/ your script and templates combined)
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-ember-template-compiler');
grunt.initConfig({
concat: {
dist: {
src: [
'website/static/website/script/vendor/handlebars-v1.2.1.js',
'website/static/website/script/vendor/ember.min.js',
'website/static/website/script/my-app.js’,
'website/static/website/script/dist/tmpl.min.js'],
dest: 'website/static/website/script/dist/deps.min.js'
}
},
emberhandlebars: {
compile: {
options: {
templateName: function(sourceFile) {
var newSource = sourceFile.replace('website/static/website/script/app/templates/', '');
return newSource.replace('.handlebars', '');
}
},
files: ['website/static/website/script/app/templates/**/*.handlebars'],
dest: 'website/static/website/script/dist/tmpl.min.js'
}
}
});
grunt.task.registerTask('default', ['emberhandlebars', 'concat:dist']);
};
This is how I do it in my app:
<script type="text/javascript" charset="utf-8" src="dist/templates.js"></script>
You can see the whole index.html file here:
https://github.com/joachimhs/WarmCroc-Ember/blob/master/index.html
In, fact, I just wrote this code today during a live-coding presentation on Ember.js. The talk is recorded as a screencast, and is available from http://emberjstraining.com
This talks should give you the pointers you need to get everything set up properly :)
When using grunt is it possible to alter the references within a html file.
For example as part of my build process I am altering the filename from style.css to style.min.css.
What I would like to do is within my index.html file alter the reference to the stylesheet to use the minified version.
Yes, have a look at grunt-usemin. The README is pretty exhaustive. :)
https://github.com/yeoman/grunt-usemin
Another possible solution, which avoids defining block comments in your html markup, is to install the plugin named: grunt-text-replace
installing the plugin via npm:
$ npm install grunt-text-replace --save-dev
and then and add the following to your Gruntfile:
Gruntfile.js:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/* UPDATES CSS SRC REFERENCED IN YOUR THE HTML FILE */
replace: {
cssLink: {
src: ['./src/index.html'], //<--- The path to your html file
overwrite: true,
replacements: [{
// Subsitute src="css/ below with the path to your CSS file.
from: 'src="css/style.css',
// Subsitute src="css/ above with the path to your minified CSS file.
to: 'src="css/style.min.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-text-replace');
grunt.registerTask('default', [
'replace:cssLink'
]);
};