I am getting this error "The resource from “https://unpkg.com/tailwindcss#3.2.1/dist/tailwind.min.css” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff)." As such, the style options are not loading. What could be the issue?
I created a tag for tailwind CSS but it does not lead the required styles.
Use the below script in the <head> tag in your Html file and then you can use tailwind CSS classes.
<script src="https://cdn.tailwindcss.com"></script>
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 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">
We are using WAS & IHS as servers and WebSEAL as reverse proxy.
Application is developed using JSF 2.0 and using .xhtml pages for view.
Issue: Using ${facesContext.externalContext.requestContextPath} to generate the context for JavaScript and CSS files.
When the application is accessed through WebSEAL, getting correct context for JavaScript file, but the CSS context is missing the webSEAL junction name.
In Source Code:
JS is included as:
<script src="${facesContext.externalContext.requestContextPath}/js/jquery/jquery-1.6.1.min.js" type="text/javascript"></script>
CSS is included as:
var cssElement = document.createElement("link");
cssElement.setAttribute("rel", "stylesheet");
cssElement.setAttribute("type", "text/css");
cssElement.setAttribute("href", "${facesContext.externalContext.requestContextPath}/css/stylecontent.css");
Links Rendered on Browser:
For JavaScript(it has context name):
<script src="/junction/appcontext/js/jquery/jquery-1.6.1.min.js" type="text/javascript"></script>
For CSS:
<link href="/appcontext/css/stylecontent.css" rel="stylesheet" type="text/css"/>
Hence,
CSS files are not loading on the page.
Anyone has any hints?
Just incase some one is stuck with the same problem:
It got resolved by making some configuration at the WebSEAL junction level.
by default, WebSEAL looks for static resources on the the server itself, hence it strips the junction off.
Settings need to be applied to "look for resources under the junction"