How to use Font Awesome icons with <ion-tab></ion-tab>?
What I am trying:
<ion-tabs>
<ion-tab [root]="tab1Root" class="fa fa-calculator" tabTitle="Home" ></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="fa-calculator"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
Here is my solution to add Font Awesome <ion-tab></ion-tab>
Note: Make sure you have properly installed font awesome in your ionic project.
your-example.html
<ion-tabs tabsPlacement="top" >
<ion-tab [root]="tabAlgorithms" tabTitle="Algorithms" tabIcon="fa-sitemap" ></ion-tab>
</ion-tabs>
your-example.scss
.fa-icons-general {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.ion-ios-fa-sitemap::before,
.ion-ios-fa-sitemap-outline::before,
.ion-md-fa-sitemap::before {
#extend .fa-icons-general;
content: "\f0e8";
}
Hope this will solve your problem.
Related
This question already has answers here:
CSS file not refreshing in browser
(15 answers)
Stylesheet not updating when I refresh my site
(16 answers)
Closed 11 months ago.
I changed a font-size from 20px to 40px and page can't read a CSS. I'm using WordPress.
clearing catch is not working. I thinking its some problem reading from css. WHen i am changin value in f12 from 20 to 40 in exacly this position size is changing.
HTML
<div>
<div class="row_205">
<i class="font-icon-19 fa fa-facebook-f" ></i><i class="font-icon-19 fa fa-instagram"></i>
</div>
</div>
CSS
.fa.font-icon-19 {
color: #ffffff;
font-size: 40px;
display:inline-block;
margin-left:10px;
margin-right:10px;
margin-bottom:20px;
}
.fa.font-icon-19:hover {
text-rendering: auto;
color:#3F464C;
}
.fa.font-icon-19:active {
text-rendering: auto;
}
That is .fa function --->
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I`m programming a complex web app with angular /typescript, and I want to use accordions for a few things. The accordions are set up with typescript/bootstrap like this:
<accordion>
<accordion-group heading="">
</accordion-group>
</accordion>
How would I add an up/down arrow to the accordion?
I tried using :after pseudo classes and the content: attribute with css for the rendered accordion classes, but that didnt work. I tried a lot of different classes to do that with, but it didnt work. Is there an easy way to do that?
this is the HTML:
...
<accordion>
<accordion-group heading="{{'Model.EntityName' | translate}}" [isOpen]="true">
...
</accordion>
...
this is the sass:
...
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114";
float: right;
color: grey;
}
...
Use this below code and toggle 'active' class:
.panel-heading .accordion-toggle:before {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
transition: all 0.5s;}
.panel-heading .accordion-toggle.active:before {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
i have the following tab:
<ion-tab [root]="HomeTab" tabTitle="Home" icon-off="customicon" icon-on="customicon-outline"></ion-tab>
The idea is that whenthe tab is selected, it shows me a icon and when not, it shows me another.
However, when i use icon-off / icon-on, the icon doesnt even appear.
But using tabIcon="customicon" works.
What is my mistake?
tab.html:
<ion-tabs>
<ion-tab [root]="HomeTab" tabTitle="Home" icon-off="customicon" icon-on="customicon-outline"></ion-tab>
<ion-tab [root]="RecentTab" tabTitle="Letzte"></ion-tab>
<ion-tab [root]="FavTab" tabTitle="Favoriten"></ion-tab>
<ion-tab [root]="PersonalTab" tabTitle="Mein"></ion-tab>
<ion-tab [root]="InfoTab" tabTitle="Info"></ion-tab>
</ion-tabs>
tab.scss:
.ion-ios-customicon,
.ion-md-customicon {
content: url(../../assets/fonts/Homeblau.svg);
width: 24px;
height: 32px;
padding: 6px 4px 2px;
opacity: 0.9;
}
.ion-ios-customicon-outline,
.ion-md-customicon-outline {
content: url(../../assets/fonts/Homegrau.svg);
width: 24px;
height: 32px;
padding: 6px 4px 2px;
opacity: 0.9;
}
You can set custom icon please use following code
tab.html
<ion-tabs>
<ion-tab [root]="HomeTab" tabTitle="Home" tabIcon={{homeIcon}}></ion-tab>
</ion-tabs>
tab.ts
set value of homeIcon as per your requirement
this.homeIcon = 'custome-home-on-icon' // < -- here you can put your condition
app.csss
ion-icon {
&[class*="custome-"] {
// Instead of using the font-based icons
// We're applying SVG masks
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: 'black';
width: 1em;
height: 1em;
}
// custom icons
&[class*="custome-home-on-icon"] {
mask-image: url('../assets/fonts/Homegrau.svg');
}
&[class*="custome-home-off-icon"] {
mask-image: url('../assets/fonts/Homeblau.svg');
}
}
i hope its work for you...
I want my links to display a font-awesome icon next to them when hovered over. The whole line looks like this:
link <span class="someicon"></span>
How do I make class "someicon" visible when class "link" is hovered over?
EDIT:
Thanks everybody, I came up with an even better solution. No need for extra classes and DOM elements:
.link:hover::after {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
content: "\00a0\f040";
text-decoration: none;
}
This is basic CSS.
.someicon {
display: none;
}
.link:hover + .someicon {
display: inline-block;
}
link <span class="someicon">i'm an icon</span>
Personally though I would make the icon part of the link so it can be clicked too!
a span {
opacity: 0;
}
a:hover span {
opacity: 1;
}
link <span class="someicon">i'm an icon</span>
use this
.icon{
visibility:hidden;
}
.link:hover+.icon{
visibility:visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
link <span class="icon"><i class="icon-li icon-ok"></i></span>
I try to make my header like this wordpress this: https://boardwalkdemo.wordpress.com/
But something isn't right. My toggle button :before code is not show properly.
I can see my progress live at http://detelin-markov.blogspot.com/
Where is my mistake?
In your .sidebar-toggle::before you should add the font-family which is FontAweSome and your content is not recognized by the font.
Here is an example:
.sidebar-toggle::before {
content: "\f039";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
font-family: 'FontAweSome';
}