I have a custom icon font (generated with Icomoon).
body {
--pseudo-element-content: '\e900';
div::before {
font-family: 'CustomFont';
content: var(--pseudo-element-content);
}
}
However, when doing this, my pseudo element doesn't appear in my browser (as if it didn't have any content). It looks like my css variable has the icon value interpreted and not its code.
If I change it to
div::before {
font-family: 'CustomFont';
content: '\e900';
}
it works like a charm. I tried a few tricks (string concat, adding ' and escaping them) but it didn't work.
I've tried it and it work with another character (see the snippet).
It seems that you don't have that font on your OS and the browser can't render it.
body {
--pseudo-element-content: "\016E";
}
div::before {
font-family: "CustomFont";
content: var(--pseudo-element-content);
}
<div><-- </div>
CSS variables are placed in the rules, not at the top level:
selector {
padding: 100px;
--some-var: 'abcdef'
}
Variables are inherited like the ordinary CSS rules.
If you want the variable to be visible everywhere, add it to html (or :root):
html {
--pseudo-element-content: '\e900';
}
Answer to edited question:
You are trying to place the styles inside each over, which is not supported in CSS. Perhaps, originally code was for CSS preprocessor - SASS.
The fix:
body {
--pseudo-element-content: '\e900';
}
div::before {
font-family: 'CustomFont';
content: var(--pseudo-element-content);
}
I want to set a global font with CSS in one of my projects.
What I have tried is the following:
#font-face {
font-family: HoftypeLight;
src: Valid URL;
}
* {
font-family: HoftypeLight;
}
but it seems not to work.
I know that I properly get the font because I have tried to add to one of my texts this class:
.test {
font-family: HoftypeLight;
}
and it works.
Hello I think use like this
body {
font-family: Algerian;
}
font same for in all project within the body tag.
I am very new to web development, and I cannot figure out how to solve the following issue, although it may be very easy.
I am using Angular 4 and Angular Material to implement tooltips like this:
<div mdTooltip="tooltip text" mdTooltipPosition="above">
<span>Show tooltip</span>
</div>
I would like to make the font size of the tooltip text bigger. However, I did not manage to find how to do this in the Angular Material documentation, neither searching in the web. Does anyone have any idea on how to do this? Thanks.
You can fix this by adding a .mat-tooltip css declaration in you main styles file and change the font size there. You need to set !important on the font size otherwise it won't show up.
Per the documentation here: https://material.angular.io/components/tooltip/api
And the spec: https://github.com/angular/material2/blob/master/src/lib/tooltip/tooltip.spec.ts
You can set the property 'matTooltipClass', as follows:
<div matTooltip="tooltip text" matTooltipPosition="above" matTooltipClass="tooltip">
<span>Show tooltip</span>
</div>
Then in your CSS (global - not for the component):
.mat-tooltip.tooltip {
background-color: darkblue;
font-size: 12px;
}
Also see their demo here: https://github.com/angular/material2/tree/master/src/demo-app/tooltip
Also keep in mind if you are using SASS, that the container for the tooltip is at the bottom and nowhere near where you are placing it in your component's HTML, so do not nest it in that component. Make sure it is standalone, otherwise it will not work. This note applies as well obviously to the comment above if you just choose to override .mat-tooltip
To see the changes, in developer tools, find the div at the bottom with the class "cdk-overlay-container". Then hover over the element. You can use your arrow keys to navigate into the element while you are hovered over to confirm whether your class is being added.
You can use css /deep/ selector.
For example:
/deep/ .mat-tooltip {
font-size: 14px;
}
Then you do not have to use !important
Add ng-deep before class name
Try this
::ng-deep .mat-tooltip {
background: red!important;
}
My problem was that using a globally defined css class-name such as .customname-toolip for matTooltipClass was NOT working. My solution below, and the !important was needed; set in the global styles.css file:
.mat-tooltip {
font-size: 16px !important;
}
add following code in your styles.css to increase its font size i.e. 12px
CSS
.mat-tooltip {
font-size: 14px !important;
}
and use matTooltip in your tag's as.
<p matTooltip="My Tooltip">...<p>
Try this way. It should work.
test.component.html
<div mdTooltip="tooltip text" mdTooltipPosition="above" matTooltipClass="myTest-tooltip">
<span>Show tooltip</span>
</div>
test.component.ts
#Component({
selector: 'test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss'],
encapsulation: ViewEncapsulation.None,
/*
styles: [`
.myTest-tooltip {
min-width: 300px;
background-color: #FC5558;
font-size: 16px;
}
`]*/
})
test.component.scss
.myTest-tooltip {
min-width: 300px;
background-color: #FC5558;
font-size: 16px;
}
Use matTooltipClass to apply your custom class on tooltips
<button mat-raised-button
matTooltip="Adding a class to the tooltip container"
matTooltipClass="custom-tooltip">
Custom tooltip
</button>
Add your style in your component style.scss file
.custom-tooltip {
font-size: 20px !important;
}
You can set custom style only for your component by adding a custom class + using /deep/, which will apply the css changes only for your custom class and not globally.
for example adding a custom tooltip for an image tag :
<img
matTooltip="text"
matTooltipClass="my-custom-class"<----
src=""/>
and in the css file :
/deep/ .mat-tooltip.my-custom-class {<---
background: #FFFFFF;
}
I dont have an experience with angular but you may add a class or id for div. Then you may control with this class or id with css file.
<div class="sth" mdTooltip="tooltip text" mdTooltipPosition="above"> <span>Show tooltip</span> </div>
And
.sth{
font-size:20px;
}
in css file.
In v15, you can change css variables
body{
.mat-mdc-tooltip{
--mdc-plain-tooltip-container-color: #616161;
--mdc-plain-tooltip-supporting-text-color: white;
--mdc-plain-tooltip-supporting-text-font: Roboto, sans-serif;
--mdc-plain-tooltip-supporting-text-size: 12px;
--mdc-plain-tooltip-supporting-text-weight: 400;
--mdc-plain-tooltip-supporting-text-tracking: 0.0333333333em;
line-height: 12px;
}
}
Put this in your component css (or home component css if you want to apply it globally. note that putting this in your global css file won't work, and you have to put it in the home component css to apply it globally).
::ng-deep .mat-tooltip {
font-size: 16px;
}
I am using ckeditor and divarea plugin so that I can use ckeditor in div not in iframe.
So the ckeditor can inherit the page's css style.
Now I want set the style of ckeditor's content.
One solution is like this:
.cke_contents h1 {
font-size: 32px;
/* custom styles */
}
.cke_contents p {
font-size: 12px;
/* custom styles */
}
I'm afraid this may cause other issues. So what I'm thinking is to set a class name so that
I can set custom styles freely. like this:
<textarea id="ckeTextblock"></textarea>
<script>
CKEDITOR.replace("ckeTextblock", {
extraPlugins: 'divarea',
bodyClass: 'customClassName'
})
</script>
.customClassName h1 {
font-size: 32px;
/* custom styles */
}
.customClassName p {
font-size: 12px;
/* custom styles */
}
That I have tried the "bodyClass" config, but it not worked in divarea.
Anyone has any idea? Thanks!
Finally, because use divarea, the ckeditor inherit the page's css, so I use this css override like this in my page's scss:
#cke_richTextArea .cke_wysiwyg_div {
padding: 15px;
h1 {
// custom it.
}
p {
// custom it.
}
}
And another thing about the ckeditor "Format" drop down menu style(like h1, p etc.), I can copy and custom a new skin and modify the editor.css and editor_*.css is okay.
I want to remove the following from an html page and add it to an existing css sheet. Do I have to do anything special like creating a new .mynewclass or simply remove the <style> tags?
<style>
<!--
.rightAlign
{
text-align:right;
}
.leftPad05em
{
padding-left:0.5em;
}
.bottomPad05em
{
padding-bottom:0.5em;
}
.topPad05em
{
padding-top:0.5em;
}
.topBottomPad1em
{
padding:1em 0em 1em 0em;
}
.bottomControl
{
padding-left:14.5em;
}
-->
</style>
add your styles to a external stylesheet for example - default.css
Include these in that stylesheet -
.leftPad05em { padding-left:0.5em; }
.bottomPad05em { padding-bottom:0.5em; }
.topPad05em { padding-top:0.5em; }
.topBottomPad1em { padding:1em 0em 1em 0em; }
.bottomControl { padding-left:14.5em; }
and in your header include this -
<link href="default.css" rel="stylesheet" type="text/css">
This is calling the default.css style sheet. Note, href="value" would be where the style sheet is located
If the existing CSS file is already imported in the HTML, then moving the inline CSS from the HTML to the file should work.
In this case it sufficient to write the embedding css code in your CSS file. Check if the classes already exist. If so, add the CSS atributes to these classes otherwise paste the code into the file.