In an ionic app, I am trying to change the font family of input.
in global.css i'm specifing the global font
* {
font-family: 'FFMalmoom' !important;
}
I want the ion-input text in specific page to take another family
i tried:
ion-input {
font-family: 'verdana' !important;
}
ion-input {
--ion-font-family: 'verdana' !important;
}
with no success , It still takes 'FFMalmoom'.
Instead of specifying the global font in the global.scss move it to the :root selector in the variables.scss file with the --ion-font-family css variable
:root {
--ion-font-family: 'FFMalmoom';
}
After that the font will still be applied globally as ionic uses this as the base font for the entire app. You can then set the ion-input font-family as you normally would with
ion-input{
font-family: 'verdana';
}
VSCode highlights nested classes with parent selector as properties in SCSS as seen here:
&__recommendation is highlighted in blue which is a bit confusing. Can i make it so vscode highlights it in yellow like a class selector? I'd like it to be like this(it's a .less file):
The code if someone needs to copypaste it:
.product-card {
padding: 15px 27px;
color: red;
font-family: "DM Sans";
font-size: 16px;
font-weight: 700;
&__recommendation {
display: flex;
}
}
Had to add in settings.json:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"entity.name.tag.reference.scss",
"entity.other.attribute-name.parent-selector-suffix.css"
],
"settings": {
"foreground": "#D7BA7D"
}
}
]
}
I've used Developer: Inspect Editor Tokens and Scopes command to find which scopes i need
More information here:
VS Code change theme color only for CSS
https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide
https://code.visualstudio.com/api/extension-guides/color-theme#syntax-colors
https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide#theming
I make a custom SVG icon on ionic 3 tabs, evrthing works well in browser,
but when I tested it on a device or emulator the color become wrong on the background
How to fix this?
ion-icon {
&[class*="custom-"] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 1em;
height: 1em;
}
&[class*="custom-donkey"] {
mask-image: url(../assets/icon/donkey.svg);
}
&[class*="custom-cat-ol"] {
mask-image: url(../assets/icon/cat-outline.svg);
}
}
Please help I thing from this code
background: currentColor;
&[class*="custom-donkey"] {
mask-image: url(../assets/icon/donkey.svg);
}
&[class*="custom-cat-ol"] {
mask-image: url(../assets/icon/cat-outline.svg);
}
instead of Adding The Url/Path of the SVG icon Try to add the SVG Code or You can Directly add the SVG code in bottom menu in HTML and Adjust the Size using CSS Class
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
does anybody know, how I can show the fileicon in my Downloadlist created with content Type filelinks in Typo3 6.1.5?
In older Typo Versions, I used the extension css_filelinks, but it doesn't work anymore.
My current Typoscript Setup:
tt_content.uploads.20.renderObj = COA
tt_content.uploads.20.renderObj.20.data = file:current:title //file:current:description // file:current:name
First of all, to let TYPO3 display file icons from the filelinks content element, you need to choose any other CE layout (in the Appearance tab) than the default.
Now TYPO3 prepends the files with icons. You might not find them too beautiful. If so, you can configure the file path end type of the icons with TypoScript:
# path to the folder containing the icons
tt_content.uploads.20.renderObj.15.file.import = fileadmin/folder/to/my/icons/
# wrap to indicate the file type of the icons (defaults to |.gif)
tt_content.uploads.20.renderObj.15.file.wrap = |.png
If you want to display icons globally without setting the layout, get rid of the corresponding if statement:
tt_content.uploads.20.renderObj.15.stdWrap.if >
Of course you could also just use CSS selectors to display the right icon:
a[href $='.pdf'] { background: url('icons/pdf.png') no-repeat 1px 2px; padding-left: 20px; }
Is there no CSS-Class you can use?
Like this:
span.csc-uploads-fileName {
background: url("../img/icon.png") no-repeat scroll 0 0 transparent;
height: 40px;
width: 43px;
text-indent: -999em;
}