It is clear from the official doc that I can change the header class using the "headerClass" prop.
However, I want to give the header a different style (specifically color) when its column is sorted.
Any advise about how to approach it?
For others who faced the same problem, you may change the following classes:
.ag-header-cell-sorted-asc {
color: blue;
font-weight: bold;
}
.ag-header-cell-sorted-desc {
color: red;
font-weight: bold;
}
could you give me a hint how to set the monospace font in the sap.m.TextArea ?
I'm missing something like setDesign( sap.ui.core.Design.Monospace ) in the old sap.ui.commons.TextArea .
add an own style file like described here:
https://openui5.hana.ondemand.com/topic/723f4b2334e344c08269159797f6f796
with content:
textarea.sapMInputBaseInner.sapMTextAreaInner {
font-family: monospace;
}
I want to use the Google font called poppins and this is the url of the font https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap. Does anyone know hot to do this?
There are three steps to getting a custom font into a tailwindcss project.
Getting the font into the project
Configuring tailwindcss to use the font.
Using custom font-family
1. Getting the font into the project (Reply by: Adam Wathan)
Tailwind doesn't do anything special to auto-import fonts or anything, so you need to import them the same way you would in a regular project, either by adding the Google stylesheet reference to the top of your HTML like this:
<!-- index.html or similar -->
<head>
...
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
...or by importing your fonts with #font-face declarations at the beginning of your CSS file:
/* Example file: styles.css */
/* poppins-regular - latin */
#font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url('../fonts/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/poppins-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/poppins-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/poppins-v15-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}
Which way? According to this SO answer: mostly prefer link
2. Configuring tailwindcss to use the font - tailwind docs
Customizing Font Families
By default, Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospaced stack. You can change, add, or remove these by editing the theme.fontFamily section of your Tailwind config.
// tailwind.config.js
module.exports = {
theme: {
fontFamily: {
// Note: This is #notapatch and not the docs
// I think what it is trying to say is that if you define
// a custom font here you are also removing the default
// font families sans, serif and mono.
//
- 'sans': ['ui-sans-serif', 'system-ui', ...],
- 'serif': ['ui-serif', 'Georgia', ...],
- 'mono': ['ui-monospace', 'SFMono-Regular', ...],
+ 'display': ['Poppins', ...],
+ 'body': ['"Open Sans"', ...],
}
}
}
// Docs end:
Customizing font-family with extend
The font-family docs don't cover this, but I've seen examples of extending the font-family instead of removing the default fonts sans serif and mono ... this is from a github issue by simonswiss
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
+ extend: {
fontFamily: {
sans: ['Poppins', ...defaultTheme.fontFamily.sans]
}
+ }
}
}
... will add Poppins to the font-sans stack, and preserve the other font families like font-mono, font-serif etc.
3. Using custom Font-Family
Using a custom font-family is a matter of adding "font" to the fontFamily name. In our case, font-display and font-sans.
<h1 class="font-display">Example display font</h1>
<p class="font-sans">Example text in body</p>
Note: Changed font to Poppins throughout answer to give consistency across text.
If you want to directly import and use it from Google fonts,
Then add the <link> in your <head> section of your index.html file.
Then in your tailwind.config.js file
module.exports = {
theme: {
extend: {
fontFamily: {
'poppins': ['Poppins'],
}
}
}
}
By defining your own font within extend will preserve the default theme fonts and add/extend your own font.
Now, you can use your font with the class font-poppins along with font-sans etc
You can add fallback font by adding it to the poppins array in the theme extension.
For more, please refer to the below links,
https://tailwindcss.com/docs/theme
https://tailwindcss.com/docs/font-family#customizing
1. Import font
You can use #import... directive from the Google Font website to import web fonts in your global.css file. Be sure to put the directive at the beginning or it is invalid
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
#tailwind base;
#tailwind components;
#tailwind utilities;
2. Use the font
As has mentioned by the other anwsers, you can configure the tailwind.config.js to generate a reusable utilities in your project. Besides, you can also use square bracket notation to generate a class on the fly. Just add font-['Poppins'] to class properties.
Here is tailwind playground example:
https://play.tailwindcss.com/xZpx31j8W0
I have this configuration in a .css file
#font-face {
font-display: swap;
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: local('Nunito Regular'), local('Nunito-Regular'),
url('~assets/fonts/Nunito-400-cyrillic-ext1.woff2') format('woff2');
}
And this in my tailwind.config.js file
fontFamily: {
// https://tailwindcss.com/docs/font-family#customizing
sans: [
'Nunito'
],
},
Thus I can use it in my markup with
<p class="font-sans">
I'm a sans-serif paragraph.
</p>
So yeah, my font is local but maybe my configuration can give you some insight on how to setup it on your side too.
Then, you could font-face's url key to set in the google fonts url as shown here: https://css-tricks.com/dont-just-copy-the-font-face-out-of-google-fonts-urls/
Here's what I did
In your main scss file
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
then in tailwind config....
theme: {
extend: {
fontFamily: {
sans: ['Poppins', ...defaultTheme.fontFamily.sans],
},
I am attempting to add a text-shadow to an ion-title element, but the shadow is getting clipped. How do I avoid this, if possible? Unfortunately, there is no part accessible in the shadow DOM, and the .toolbar-title element within it is the one I need to resize. Any ideas of how to do this?
https://codepen.io/mattmc318/pen/zYBOVQP
Yes, sadly we don't have a part to access the title and you can't use .toolbar-title either to directly set the height, and many css properties won't work.
I tested in your codepen and seems that you can use line-height instead of height in your ion-title css selector to set the height of your line box:
ion-title {
font-family: 'M PLUS Rounded 1c', var(--ion-default-font);
font-weight: bold;
text-align: center;
line-height: 32px;
#include outline(4, rgba(137, 57, 233, 0.5));
}
I am using Ionic 2 for developing my App. I want to use my custom icons in my app like we use ionic 2 icons using tag. Eg:
<ion-icon name="my-custom-icon"></ion-icon>
How can i achieve this? Is there any recommended way to doing this?
This is the easiest way I've found, from the forums at https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/36.
In your app.scss file, add the following code:
ion-icon {
&[class*="appname-"] {
// Instead of using the font-based icons
// We're applying SVG masks
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 1em;
height: 1em;
}
// custom icons
&[class*="appname-customicon1"] {
mask-image: url(../assets/img/customicon1.svg);
}
&[class*="appname-customicon2"] {
mask-image: url(../assets/img/customicon2.svg);
}
&[class*="appname-customicon3"] {
mask-image: url(../assets/img/customicon3.svg);
}
}
Then in your templates, you can use the following HTML to create the icon:
<ion-icon name="appname-customicon"></ion-icon>
This is far less complicated than using the font-based methods. As long as you're not adding hundreds of icons you should be okay with this method. However each image is sent as a separate request, where as with the font methods all the images are contained in one file, so it would be a little more efficient.
If you want to use custom fonts in ionic 2+ you can do it with following.
Step 01:
Have/create custom font SVG files using tools such as XD.
Go to awesome online tool https://icomoon.io to generate font icons out of your SVG files. It's free tool and very good, I am using it for a while.
Download your custom font file.
Your file will look like something below.
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
replace above code with :
[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{
#extend .ion;
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
Step 02:
We can use SASS #mixing for repetitive work
#mixin makeIcon($arg, $val) {
.ion-ios-#{$arg}:before ,
.ion-ios-#{$arg}-circle:before ,
.ion-ios-#{$arg}-circle-outline:before ,
.ion-ios-#{$arg}-outline:before ,
.ion-md-#{$arg}:before ,
.ion-md-#{$arg}-circle:before ,
.ion-md-#{$arg}-circle-outline:before ,
.ion-md-#{$arg}-outline:before {
content: $val;
font-size: 26px;
}
}
we can use our sass mixing in our sass file like :
#include makeIcon(icon-new-home, '\e911')
Step 03
Use it like
<ion-tabs class="footer-tabs" [selectedIndex]="mySelectedIndex">
<ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="icon-new-home"></ion-tab>
</ion-tabs>
and its even support android ripple effect, which kinda looks cool
[Updated] 30 Nov 2017
#ionic/app-scripts : 3.1.2
Ionic Framework : ionic-angular 3.9.2
For Ionic 3.1.2
You need to add #import "ionicons"; inside your /src/theme/variables.scss file which will fix below error
"[class^="icon-"]" failed to #extend ".ion". The selector ".ion" was not found. Use "#extend .ion !optional"
if the extend should be able to fail.
With the current Ionic 3.3.0 you can use the solution from Anjum, but you have to change
#import "ionic.ionicons";
to
#import "ionicons";
in the src/theme/variables.scss file.
Found this solution at:
https://github.com/yannbf/ionicCustomIconsSample/blob/master/src/theme/variables.scss
Been trying to implement Anjum Nawab shaikh answer on top with the icons sass sheet from icomoon.
I have been able to get it working with version 2.2.2.
In the www/fonts of the project I had added the icomoon files:
icomoon.svg
icomoon.ttf
icomoon.woff
icomoon.eot
icomoon.scss
In icomoon.scss I added the following scss:
#font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?tclihz');
src: url('../fonts/icomoon.eot?tclihz#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?tclihz') format('truetype'),
url('../fonts/icomoon.woff?tclihz') format('woff'),
url('../fonts/icomoon.svg?tclihz#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{
/* Didn't feel the need to #extend since this just adds to already existing .ion
code which I believe is replaced to just ion-icon tag selector in
www/assets/fonts/ionicons.scss */
font-family: "Ionicons", "icomoon" !important; //So just add this
}
//Mixin
#mixin makeIcon($arg, $val) {
.ion-ios-#{$arg}:before ,
.ion-ios-#{$arg}-circle:before ,
.ion-ios-#{$arg}-circle-outline:before ,
.ion-ios-#{$arg}-outline:before ,
.ion-md-#{$arg}:before ,
.ion-md-#{$arg}-circle:before ,
.ion-md-#{$arg}-circle-outline:before ,
.ion-md-#{$arg}-outline:before {
//important to overwrite ionic icons with your own icons
content: $val !important;
font-size: 26px;
}
}
//Adding Icons
#include makeIcon(email, '\e900');
...
Then I did an import to the variables.scss
#import "../www/fonts/icomoon";
Now we can add this to the html template:
<ion-icon name="email"></ion-icon>
Before starting : make sure that you have every svg file you need.
Now just go here : http://fontello.com/
That tool will generate your icon font and the CSS needed with. It is pretty intuitive, just use it, download, and copy your font wherever you want in your www folder but keep the same file structure. To finish, just integrate your CSS file in your index.html file and you're done!
I hope it will solve your issue! ;-)
According to ionic team:
Hey there!
Right now it's limited to using ionicons, since underneath it's rendering an ion-icon, and thats handling the platform differences. You could open an issue and we could discuss adding this feature there
You can see all answers in here:
https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/16
I also find this:
https://www.npmjs.com/package/ionic2-custom-icons ,
but do not seems a clever solution (I prefer to wait for a solution of Ionic team).
The best scenario for this is use old way, by creating a class on a scss file.
For add custom icons I use in my scss file:
.ion-ios-MYICON:before,
.ion-ios-MYICON-circle:before,
.ion-ios-MYICON-circle-outline:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-circle:before,
.ion-md-MYICON-circle-outline:before,
.ion-md-MYICON-outline:before {
#extend .ion;
}
.ion-ios-MYICON:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-outline:before {
content: 'your-custom-image';
}
Then in your HTML code:
<ion-icon name="MYICON"></ion-icon>
I think this step-by-step by GerritErpenstein is very intuitive, it works pretty good for me. My Ionic version is 2.2.2. Literally, you use a sentence like this and it's done:
<custom-icon set="star" name="iconostar"></custom-icon>
https://github.com/GerritErpenstein/ionic2-custom-icons
Create Icon
ion-icon {
&[class*="custom-"] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 0.8em;
height: 0.8em;
}
&[class*="custom-rupee"] {
color: yellow;
mask-image: url(../../assets/Images/rupee.svg);
}
&[class*="custom-ballon"] {
mask-image: url(../../assets/ballon.svg);
}
&[class*="custom-mouse"] {
mask-image: url(../../assets/mouse.svg);
}
}
And to use them
<ion-icon name="custom-rupee"></ion-icon>
<ion-icon name="custom-mouse"></ion-icon>
<ion-icon name="custom-ballon"></ion-icon>
If ionic way is not working for you, you can work with the angular way. Use this package: https://www.npmjs.com/package/angular-svg-icon.
Sample Code for ionic usage:
<svg-icon src="/assets/icons/activity.svg"></svg-icon>
Following is the recommended way to display external svg icons using ion-icon:
To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.
<ion-icon src="assets/icons/custom_icon.svg"></ion-icon>
Reference: https://ionic.io/ionicons/usage