I am using material web components in my project and I would like to change the font family. I was going through their documentation and I have tried to do that by setting the variable in my sass file like this:
$mdc-typography-font-family: Comfortaa, sans-serif !default;
But, that didn't work, in the documentation it also says that sass mixin sets the font:
mdc-typography-base
How can I change the mixin to use a different font-family?
I figured this out by removing !default flag:
$mdc-typography-font-family: Comfortaa, sans-serif;
Also, don't forget to embed Google Fonts in the head tag:
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
Related
I'm trying to make a website using Yew framework(?). I want to use a special font. I downloaded the font and I imported it into html, but Yew used server-side rendering and it doesn't allow me to just import a .ttf file as easily as a static page. Is it even possible with Yew.
This is what I used
#font-face {
font-family: "terminal";
src: url(windows_command_prompt.ttf);
}
To use a custom font or to use a file(ie css or images). You have to use the tag in the index.html file and a the data-trunk attribute to the tag. Then, you have to add the right rel tag. You are trying to use a font, so you will just copy the file on the web. It does depend on what file type you are using and what you are going use for to decide what rel tag you need. Read more about it here.
<link data-trunk rel="copy-file" href="file/path.ttf">
Based on the code snippet below (and found here), the material library is styling the component based on the text content of mwc-icon. After looking at the source code for mwc-icon found here, there doesn't seem to be any javascript logic doing the styling directly. Somehow this seems to be happening in the css or in the font definition itself.
How is the icon being applied/rendered in place of the text?
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
<mwc-icon>shopping_cart</mwc-icon>
<script type="module">
import '#material/mwc-icon';
</script>
The answer for your question is that the font-family property set in the file.
You have imported the Material Icons font and used it. There is where the icon name you enter is defined. Instead of character definitions icon names are defined and mapped to the corresponding svg or png images.refer here
Hey guys i am trying to build a comment system project with Nodejs . At a certain place i want to use Font Awesome icons in my project so i tries 2 ways but failed to render thoses icons
First
inclucing
<link href="https://stackpath.bootstrapcdn.com/.../font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
inside my head tag in ejs file
and then
Second
Download this zip file https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
and open the CSS folder inside and drag the all.min.css file into your public directory in your project.
and then Use a link tag to reference it in your templates/HTML, e.g:
and
Both the ways failed, am i missing something ?
Since you are using the font-awesome solid styles with the fas class, you'll have to include the solid.css styles.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/solid.min.css">
I am trying to customize the Liferay UI by using custom theme using base as as "_Styled" theme.
I have my own css files which I coped to _diff/css folder of theme and imported them "custom.css" file .However its breaking the presentation of liferay.In my custom CSS I have styles defined for all the standard tags like body,div etc which is impacting the liferay UI too.
How can I resolve this conflict? Thanks in advance!
Quick (and not the best) solution is to remove contents of liferays css file (for example "base.css") and save this empty file in /diff/css/ folder of your theme. This way the base.css will get overriden with your new empty file and thus no styles will get loaded. And your custom.css will be the only stylesheet that is taken into account.
Well, of course it all has an effect on the rest of Liferay as well. Liferay provides quite a bit of the HTML DOM of your page, and if you change the presentation of all of those elements, you'll have to take care to style Liferay's elements too.
Is this a conflict? No. Let's go for the simplest case: You declare div {color:green;}. Of course, now everything, your components as well as Liferay's components, use green text. If you only want to style your own portlets, you might want to specify some portlets: div.portlet-my-own-application {color:green;}
I know that color is a too simple usecase, but I hope it illustrates the solution strategy.
Rather than following Artem Khojoyan's suggestion to override Liferay's base.css, I'd recommend to take a look at the resulting css, what's effective etc., and simplify your own css - adapt it to be used within Liferay - by inspecting the effective CSS for every elements that looks off. Firebug or any of it's relatives are your friend.
I'm afraid, with the details "I'm doing something which has an effect on Liferay UI" there's nothing much more to help you. In fact, I'd hope that what you do has an effect on Liferay's UI... You'll just need to find the proper CSS code
Ideally if your styles are loaded from custom.css, then will overwrite liferay default styles.
In some cases, to overwrite a style in css, you can use !important
for example, liferay default style
body {
background-color: #fff
}
You can specify your style to consider irrespective of order of loading
body {
background-color: red !important;
}
All,
Simple question: I want to include an image "logo.png" as the background for my-app. Where should I put the file and how should I refer to it in the CSS file which is in the resources folder along with the main_page.js?
Here is the rest of the story:
I have a CSS class called doc-background. I know this class works because when I set the color of the background in a CSS file like so:
.doc-background { background-color: red} it has the desired effect and Firebug shows me that the class doc-background is being used.
However, when I add a line like
.doc-background { background-image: url('logo.png'); }, there is no effect. Firebug shows that the class doc-background is not applied. And when I modify the style in Firebug to add the line about the background-image it says "Failed to load URL" in the tooltip.
Can someone please point me to a guide on how to work with resources and images and where to put them if I want to use CSS? I have successfully used them using the image-view and coding them into the HTML.
Here is what I have already tried:
Using static-url instead
Moving the image file to images folder under resources
Referred to the image by using all variations on the path - including resources/images only including images, not including either...
Lot of Googling for the answer, Reading create your own app tutorials etc.
If you have an example app that uses colors and images from a CSS that will be the ultimate! But a location and some help with the background-image CSS property will get me started!
Thanks much,
Vis
Place your image somewhere relative to your css:
resources/style.css
resources/images/logo.png
Then use static_url to refer to the image:
background-image: static_url('images/logo.png');