i want to move the text displayed at the bottom of font Awesome
enter image description here
i just want to use css ,html to make something like in the image
1- add container for the icon and the text
2- add center the content in the container
3- add style to the icon
4- you can repeat the icon container to make as many as you want copies
HTML :
<div class="icon-container">
<i class="fa fa-home icon"></i> <!-- this should be your icon -->
<h3>sturdy themes</h3>
<p>our themes are updated regularly to keep them bug free!</p>
</div>
CSS :
.icon-container {
width: 300px;
text-align: center;
}
.icon-container p {
color : #b2b2b2;
}
.icon-container i {
color : orange;
font-size: 100px;
}
Related
I want to add a sticky button at the bottom of screen (not page) in my angular 2 material project.
I tried some tweaks but currently when I scroll down the button doesn't stays where it was supposed to be.
before scroll it looks like below:
after scroll:
Elements's HTML inside template:
<a md-fab id="fab">
<md-icon>add</md-icon>
</a>
CSS Applied on the Element Except for any defaults:
#fab{
position: fixed;
right: 30px;
bottom: 30px;
}
*{
margin: 0;
}
How can I fix this?
Additionally is there any built in way with Angular material to do what I want?
UPDATE:
My main component's Template:
<toolbar></toolbar>
<side-nav></side-nav>
Side Nav's Template:
<md-sidenav-container id="sidenav-container">
// contents
<router-outlet></router-outlet>
</md-sidenav-container>
and its CSS:
#sidenav-container { // styling to make side nav of full height
position: fixed;
height: 90%;
min-height: 90%;
width: 100%;
min-width: 100%;
}
and then inside the component added by the router-outlet will come FAB element.
Notes-list component's template (the one shown in the images):
<a md-fab id="fab">
<md-icon>add</md-icon>
</a>
//rest of the content
LIVE DEMO
You are correct to put the router-outlet within the md-sidenav-container.
Add the follow class to your FAB element.
.md-fab-bottom-right2 {
top: auto !important;
right: 20px !important;
bottom: 10px !important;
left: auto !important;
position: fixed !important;
}
This is how I got it to work.
Add a custom class and apply your styles also look for the hierarchy in which files are referenced to DOM
<div class="example-container">
<h3>sticky icons</h3>
<a class="mine" md-fab routerLink=".">
<md-icon>check</md-icon>
</a>
<a md-mini-fab routerLink=".">
<md-icon>check</md-icon>
</a>
</div>
LIVE DEMO
Update 1 :
You are using the icon inside the md-sidenav container which is a mistake
<div class="example-container">
<md-sidenav-container>
<md-sidenav #sidenav>
<p>side nav works</p>
</md-sidenav>
</md-sidenav-container>
<p>content</p>
<a class="mine" md-fab (click)="sidenav.open()">
<md-icon>check</md-icon>
</a>
</div>
Updated Demo
Update 2 :
Look at the below code, you are wrapping everything inside sidenav which is wrong. Use as below
<md-sidenav-container id="sidenav-container"> </md-sidenav-container>
// contents
<router-outlet></router-outlet>
I'm working with Ionic framework, and I need to have a footer with background color red and with a text align in the center. The footer need to have a behaviour like a button; The footer is should be like a Button where in the center there is the text 'REGISTER':
I try this code:
IONIC HTML:
<ion-content>
Some content!
</ion-content>
<ion-footer-bar class="myColor">
<div class="buttons">
<button class="button">REGISTER</button>
</div>
</ion-footer-bar>
CSS:
.myColor{
color:red
}
.button{
color:white;
text-align:center;
}
But, it doesn't work. i don't know;
Some of you have some good advice:
Thanks!
You should just set the whole footer as a clickable element like this:
<ion-footer-bar class="myColor" ng-click="myRegisterFunction()">
REGISTER
</ion-footer-bar>
And then you can just use simple css:
.myColor {
background-color: blue;
text-align: center;
justify-content: center;
align-items: center;
color: white;
}
And in your controller you can call the function:
$scope.myRegisterFunction = function() {
// do the registration stuff
}
ion-footer-bar{ --background : blue; }
I want to have a Centered icon arrow.gif underneath a single Word of the headline h1. my Problem is that this word is followed by other words. how can I place the icon directly under this word in a way it is centered to this single word.
Maybe try this. but be careful. It's very limited if you have more workds or multiple lines.
.u-table {
display: table !important;
}
.u-table-cell {
display: table-cell !important;
}
.u-text-center {
text-align: center !important;
}
<h1 class="u-table">
<span class="u-table-cell u-text-center">Word 1<br/><img src="" alt="Foo"></span>
<span class="u-table-cell">word 2</span>
</h1>
I'm very new to Ionic and I have a simple question that I couldn't find in the documentation.
Is there any way to use Ionic classes to simply align the content which is now below the image, to the left?
The code I currently have is:
<ion-item class="item-left item-text-wrap">
<img src="http://placehold.it/100x150" alt="Poster">
<h2>Title</h2>
<h3>Something else</h3>
Thanks!
See this demo: http://play.ionic.io/app/e8f309f71714
You dont need to do any styling for this, ionic thumbnails will be of best use to you, see here Documentation.
This is how you will do
<ion-item class="item-thumbnail-left item-text-wrap">
<img src="http://placehold.it/100x150" alt="Poster" class="customized-image">
<h2>Title</h2>
<h2>Something else</h2>
<p>your large content goes here</p>
</ion-item>
item-thumbnail-left class is provided by ionic. You will only have to make some style class to make image rectangle. Because by default image will be square.This is how class can look like
.customized-image{
max-height: 100px !important;
}
customized-image class should be added to image tag.That is it, no more custom styling.
You Can acomplish it using inline-block
.item-left img {
display: inline-block;
width: 33%; /* or waterver you need = w1 */
vertical-align: top;
}
.item-left h2,.item-left h3 {
display:inline-block;
width: 66%; /* (100-w1)% */
vertical-align: top;
}
I have a line with icon fonts (Font Awesome). On hover I want the font size increased (bigger icon) while keeping the icon centered within the line (both horizontal and vertical) and the remaining icons should retain their size and position.
HTML:
<div id="container" class="class1">
<span class="fa fa-square-o class2"></span>
<span class="fa fa-square-o class2"></span>
<span class="fa fa-square-o class2"></span>
<span class="fa fa-square-o class2"></span>
</div>
CSS:
.class1 {
font-size:2em;
line-height:2em;
}
.class2:hover {
font-size:1.2em;
}
JSFiddle: http://jsfiddle.net/8LLtg5sf/2/
I can't find the proper settings for margin etc. Help!
Try scaling it instead:
.class2:hover {
transform:scale(1.3);
}
http://jsfiddle.net/8LLtg5sf/6/
Here is my solution:
.class2 {
display: inline-block;
width: 1em;
vertical-align: middle;
text-align: center;
margin: 0 0.1em;
}
And update this:
.class2:hover {
/* your styles */
margin: 0;
}
Here is a fiddle: http://jsfiddle.net/ty4tu89b/
First we make them display as inline-block, thus we can give them fixed width. Than we align them vertically in the middle and center them horizontally. Because when hovering the font size increases for 0.2em we add margin to the left and right each 0.1em.
When hovering the margin should be 0. And voila! They stay as they lay.