I am working on android project with ionic framework.
I have www\templates\home.html in which I am using images for item icon.
my view code home.html
<ion-content>
<div class="row gray">
<div class="col"><div class="abc"></div>
Opening Balance</div>
</div>
</ion-content>
my css in style.css:
.abc{
background: url('../img/icon.png');
}
Anyone have any suggestions?
Thanks in advance
make sure the file path is correct
make sure the permissions on the file are allowed. If you copied the image from somewhere, the permissions may not allow you to use it on your project.
Related
I have set up ionic environment
1) node and npm
2) cordova and ionic with sidemenu template
While using the ionic 4 components in the application its classes are not working
You can see it shows button without css.
Any help is appreciated.
Thank you
Components are working, I can see <ion-content> and <ion-header> in the console. probably you css is not working , try this in html
<ion-content padding>
<button ion-button class="btn">My button</button>
</ion-content>
and in scss
.btn{
background: red;
}
you can change the css property it this btn class and it should reflect when running the app
I would like to have the "ion-android-sync" icon (http://ionicons.com)
My current code is
<button class="button" ng-click="loadEvents()">L</button>
What's the proper class structure for that?
Also, if I just load the css file advertised on ionicons.com is enough?
you can use ion-icon element to use ionic icons inside button.
I hope it will reach your requirement
for example, i will add facebook logo inside button
<button class="button" ng-click="loadEvents()"><ion-icon name="logo-facebook"></ion-icon></button>
I am building an Ionic2 app (actually I am learning), and am trying to apply custom css to my component, however it is not successful.
My app folder structure is as following:
My app.core.css:
#import "../pages/start/start";
#import "../pages/farmList/farmList";
#import "../pages/slider/slider";
#import "../pages/farm/farm";
My slider.component.ts
<ion-slides #mySlider [options]="mySlideOptions" id="mySlides">
<ion-slide >
<div padding>
<h1>Welcome to Swarms app</h1>
<p>Here you can view, manage and manipulate all your data</p>
</div>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
<button (click)="goToHome()">Start</button>
</ion-slide>
</ion-slides>
I am trying to add some properties in slider.scss but it has no effect. How can apply some styles to it?
Also, I created a folder 'img' like www/build/img and put few images in there, but on whenever I restart my ionic app with ionic serve, the folder is vanished, WHY?
UPDATE: First problem is solved, it was a simple typo in components where it had to be styleUrls:['/slider.scss']and not styleUrls:['/slider.css']
Add a folder css in the src/assets folder. Put your css file there. In the src/index.html file, add this line
<link href="assets/css/yourCssFileName.css" rel="stylesheet">
Then you can refer to anything in the css file in your other pages as what you normally do with web pages.
Also, I created a folder 'img' like www/build/img and put few images
in there, but on whenever I restart my ionic app with ionic serve, the
folder is vanished, WHY?
When you run ionic serve all the javascript and styles files are compiled and put together (among other tasks) in your build folder, and that's why if you put somethig there, is deleted.
In order to avoid that, you should put your images in www\images and then reference them in your code by doing:
<img src="images/myImage.png" />
======================
EDIT:
You can find more information about what's going on when you run ionic serve (and also emulate, deploy and build) by taking a look at your gulpfile.js:
/**
* Ionic hooks
* Add ':before' or ':after' to any Ionic project command name to run the specified
* tasks before or after the command.
*/
gulp.task('serve:before', ['watch']);
gulp.task('emulate:before', ['build']);
gulp.task('deploy:before', ['build']);
gulp.task('build:before', ['build']);
And in the lasts lines of code of the gulpfile.js you can see this:
gulp.task('clean', function(){
return del('www/build');
});
Which is what causes the build folder to be deleted.
I have an appgyver app that I've tried to display images via
<img src="app/common/assets/pic.jpg"/>
<img src="common/assets/pic.jpg"/>
<img src="assets/pic.jpg"/>
<img src="pic.jpg"/>
<img src="http://www.somegoogleimage.com/pic.jpg"/>
Nothing shows. I'm confused out of my wits! I've also tried ng-src directive as source. Help !
create a folder in your supersonic project
app/common/assets/images
Put your images in app/common/assets/images
src =/images/yourimage.jpg
I'm trying to use datepicker from bootstrap (http://eternicode.github.io/bootstrap-datepicker/) and everything works fine except none of the glyphicons are showing up.
I saw that glyphicons are moved to another directory under bootstrap 3 (http://glyphicons.getbootstrap.com/) which is what I'm using, but I wasn't sure how I can integrate it.
Both
<input type="text" value="12-02-2012" date-date-format="yyyy-mm-dd" class="datepicker">
And
<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" readonly/>
<span class="add-on"><i class="icon-th"></i></span>
</div>
Didn't work.
Anyone knows how I can integrate bootstrap 3 with the twitter datepicker?
Download the plugin's source code Javascript and CSS (or less) and replace old class references to new, see: http://www.bootply.com/bootstrap-3-migration-guide.
B.e. as mentioned by PilHA replace icon-* with glyphicon glyphicon-*, input-append with input-group etc.
Do the same for your HTML code. Or use a migrator/updater like: http://twitterbootstrapmigrator.w3masters.nl/, http://bootstrap3.kissr.com/ or http://code.divshot.com/bootstrap3_upgrader/
Install Glyphicons from http://glyphicons.getbootstrap.com/: download the files and copy over all the font files to a /fonts directory near your CSS. Include the compiled CSS file from the /css in the repository to your local css folder or download the Less file and compile it with your Bootstrap files.
update Glyphicons are back since RC2. Twitter's Bootstrap 3 includes 180 glyphs in font format from the Glyphicon Halflings set.
In addition to changing the class references, I found there to be some layout considerations disallowing a one-to-one swapping of certain classes, such as span2 on the input control. I ended up with the following:
<div class="form-group row">
<div class="col-xs-8">
<label class="control-label">My Label</label>
<div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly="" value="12-02-2012">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
CSS changes in datepicker.css on lines 176-177:
.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {
Javascript change in datepicker-bootstrap.js on line 34:
this.component = this.element.is('.date') ? this.element.find('.input-group-addon') : false;
I also wrote up a blog post going into more detail here: http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/
download bootstrap3 from here Download
Now unzip it and get font from font folder .
Copy this .ttf , .otf ,.svg and other file and paste # your project root
And You can download glyphoicon.css from here glypho.css
include this css file in index file
Thats done
I wasn't able to change my glyphicons initially and in the F12 dev tools I could see an error trying to load the "glyphicons-halflings-regular.woff2". I was able to fix it by downloading the .woff2 file and adding it to my fonts folder. Then I was able to change to what I wanted.
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2