How can i set own icons in tab using CSS? Now i'm using icon-on="icon ion-ios7-clock" for default, but i want to use my own.
<ion-tab title="Фильтр" icon-on="icon ion-ios7-clock" icon-off="icon ion-ios7-clock-outline"
on-select="places.onFilterTabPress()">
You have to define your own icon css class like it's done with all the ionic icons for example the ion-ios7-clock you're using. It's actually a font with icons which is used there.
If you have a font which you want to use as your own icons then you could just copy the class found in the ionic.css:
.my-custom-icon:before {
content: "MyIconFontContent";
display: inline-block;
font-family: "MyIconFont";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
if you want to use an image you could use it as a background-image in your defined class instead of the font stuff. but you probably have to set a fixed width and height.
Related
I have the bug that on Mac/iOS in Chrome and Firefox browser my custom icon font is suddenly cut off.
I created the font with icomoon.io because that actually worked quite well on different browsers so far.
The font loads without errors and the size is correct.
It is also not because there is a Div/Container ... over it the icons are on top.
Fun fact: If you change the fontsize to an enormous amount like 120px the Icons are fixed again
Is this a known bug, or is there a fix for it?
Example Img
Icon Call
<i class="ke-icon-basket"></i>
Applying the class
i[class^="ke-icon"], i[class^="ke-icon"] span {
speak: never;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: KEIcons !important;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
}
Font initalization
#font-face{
font-display:swap;
font-family:KEIcons;
font-style:normal;
font-weight:400;
src:url(fonts/KEIcons/KEIcons.woff) format("woff"),url(fonts/KEIcons/KEIcons.woff2) format("woff2")
}
Steps already done:
Changed to all kinds of font type
Resized icons in font
Disabled Apaches default cache function and all of the pagespeed modification which are supervised by hetzner
To replace the tedious effort of editing and saving copies of .svg files with customized colors and variants, I decided that it would be nice to try and work with modern icon libraries.
To that end, I have tried to implement Google's Material Icons library as a font, inside a TwinCAT HMI project. The result looks something like this:
Fonts/MaterialIcons-Regular.woff2 (locally hosted font file)
Fonts/Fonts.css contains:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2');
}
Themes/Base/BaseStyle.css contains the style definitions for the various classes
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
}
/* Rules for using icons using custom colors */
.material-icons.orange600 { color: #FB8C00; }
This allows me to define a TcHmiHtmlHost, create an element, and voila!
<div id="material_icon_622" data-tchmi-type="TcHmi.Controls.System.TcHmiHtmlHost" data-tchmi-grid-row-index="2" data-tchmi-width="30" data-tchmi-height="30">
<span class="material-icons md-dark ">face</span>
</div>
However, I need to define and customize an HTML host for each time I would use a symbol this way...
What other ways have people tried to efficiently work with adding icons to their TwinCAT HMI? Is there an icon framework for TwinCAT that I am missing? Is customizing SVG files the way to go? Should I just use a modern web framework?
Thanks in advance.
We use SVG files as icons. This is flexible, and there are loads of icons available already.
The only thing that is irritating is that Beckhoff puts the SVG file in an tag as 'src'. That has the consequence that for every icon you should have it in a specific color if needed. This is the Beckhoff way (see the included images in Twincat HMI by Beckhoff). I want to use the fill property for SVG files, however that doesn't work. So I've implemented a 'hack' according to: How to transform black into any given color using only CSS filters
There is a design drawn in Zepplin. There is a font
font-family: HelveticaNeue;
font-size: 16px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #888888;
But for some reason in the browser it is displayed much thinner than in design. What could be the problem?
In the picture the design below the browser at the top:
here you hape put the font-weight property just put the value to 600 like below
font-weight: 600;
the reason behind that is when we put font-weight below 600 it shows the text normal, while if we put the font-weight between 600-900 it shows the weighted text
you can use font-weight: bold :- if you need text be look like bold or else you can give some value 500-900 to match the design in the zeplin.
hope it will work fine in all the browsers if give value as "bold".
#Alexandr Kizilow some fonts varies browser to browser. Use below:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
if not then make font-weight:500 (font-weight also varies from font to font)according to font you are using, it will make font bold.
I'm having a real hard time overwriting some of Bootstrap's default CSS styles, more specifically typography and headings. Please take a look at the example below:
http://silvasonic.com/boostrap/index-001.html
The desired outcome should be something similar to the screenshot below:
http://silvasonic.com/boostrap/screen.png
For some reason the headers — and even the paragraph below that — are forced to bold, not matter what I do. The font has two weights (400, 700), but when I try to explicitly declare 700 for bold it gets some sort of double bold. I also understand that Bootstrap's default font-weight for headings is 500, but I should be able to overwrite it regardless.
I've tried a few different ideas — even including !important — but nothing seems to work.
Any / all feedback and help is very much appreciated.
Thanks!
As suggested by #Christina (see comments below) adding the -webkit-font-smoothing: antialiased; and '-moz-osx-font-smoothing: grayscale;' properties fix the issue. The final CSS looks like this:
h3 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 24px;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h4 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 22px;
color: #777;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Thanks a lot for your help!
I have created an icon font using custom .svg icons and I am having a problem with the padding (or possibly something else). The icons I used to not include any padding, in case that question comes up.
For some reason, the icons seem to have shifted above where they should be and I can't find any way to get them back down into the container. Here is an example of what I am talking about: http://i.imgur.com/RwOKWLp.png
I have set the "background-color" to yellow to highlight my problem.
Here is the HTML for one icon:
<div class="vicon" aria-hidden="true" data-icon=""></div>
Here is the CSS that I am currently working with:
[data-icon]:before {
font-family: 'iconfont';
content: attr(data-icon);
speak: none;
font-size: 100%;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.vicon {
display: inline-block;
font-size: 50px;
margin-top: 1em;
background-color: yellow;
}
#font-face code:
#font-face {
font-family: 'iconfont';
src:url('[font_location_on_company_server].eot');
src:url('[font_location_on_company_server].eot?#iefix') format('embedded-opentype'),
url('[font_location_on_company_server].woff') format('woff'),
url('[font_location_on_company_server].ttf') format('truetype'),
url('[font_location_on_company_server].svg#icon_font') format('svg');
font-weight: normal;
font-style: normal;
}
Does anyone have any idea why this might be happening?
The problem is not CSS but your font's baseline height (see http://icomoon.io/#docs/font-metrics)
It means the font metrics are wrong. I don't know if you have them changed or if it was a bug from Icomoon but I've been able to export a correct font right now.
Anyway you cannot (or at least you shouldn't) "correct" this with CSS. The best way is to change the font.