<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
<span class="material-symbols-outlined">
delete
</span>
Initial phase its showing raw text and then after some time its display the icon, How can we fix this?
You can set display in the params, which does the same thing as CSS font-display property does.
Read more here.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200&display=block" />
<span class="material-symbols-outlined">
delete
</span>
Related
I am using the offline version of font awesome in a react project. I followed this manual to set it up. The problem i have is that the icons work on some pages but don't work on others. For example. They work on localhost/courses but don't work on localhost/courses/1. Or they work on localhost/authors but don't work on localhost/authors/1. I hope you see the pattern. How do i go about resolving this problem? Here is how i implemented my current solution.
I downloaded the offline bundle which contains several folders. Then i referenced /css/all.css and /js/all.jsinside inside the <head> tag.
<head>
<link href="/folder/css/all.css" rel="stylesheet">
<script defer src="/folder/js/all.js"></script>
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="far fa-user"></i> <!-- uses regular style -->
<i class="fal fa-user"></i> <!-- uses light style -->
<!--brand icon-->
<i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>
Let me try to answer your question
The safest way to do is by using full URL to your Font Awesome resources as follow (or other full URL if your URL is different then i provide):
<head>
<link href="//localhost/courses/folder/css/all.css" rel="stylesheet">
<script defer src="//localhost/courses/folder/js/all.js"></script>
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="far fa-user"></i> <!-- uses regular style -->
<i class="fal fa-user"></i> <!-- uses light style -->
<!--brand icon-->
<i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>
Other solution is using code as follow (by adding ../), but you must count how long your URL structur to make it work on particular page:
<head>
<link href="../folder/css/all.css" rel="stylesheet">
<script defer src="../courses/folder/js/all.js"></script>
</head>
I hope this solution is work for you.
I solved this problem by using React's %PUBLIC_URL% which is available with react-scripts#0.5.0 and higher. You can read about it here. Here is how I am referencing the font-awesome files now, given they are inside a folder called font-awesome inside the public folder of a React project.
<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/font-awesome/css/all.css">
<script defer src="%PUBLIC_URL%/font-awesome/js/all.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <!--Supporting All devices width-->
<meta name="description" content="Lowa State University Library">
<meta name="keywords" content="For a Web Design Assignment">
<meta name="author" content="Tharuka Dananjaya">
<link rel="stylesheet" href="./css/style.css">
<!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">-->
</head>
<body>
<header>
<div class="container">
<div id="head_top">
<h1>LOWA STATE UNIVERSITY | <span class="highlight"> LIBRARY</span></a></h1>
</div>
<nav>
<ul>
<li>
<li class="current">Home</li>
<div class="dropdown">
<button class="button_book">Books</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
</div>
<!--Login
Register-->
Student Info
</ul>
</nav>
</header>
<section id="search_bar">
<div class="container">
<form>
<input type="text" placeholder="Search">
<button type="search" class="button_1">search</button>
`I have external CSS file and Bootstrap. i already link my CSS style in my page and it's work perfect. so I'm try create a table using bootstrap. but after linking bootstrap files in page change every styles. ex. header fonts, everything. So how do i link both Styles and i need both styles.After Linking Bootstrap file
Please first add bootstrap style and then your style.css.
Like
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
in your index.html file in the head section.
The priority of css works from bottom to top.
If you're importing your custom styles BEFORE Bootstrap; as soon as you import bootstrap it will override the classes you may have created in your CSS file.
Try importing bootstrap before your own CSS and see if that makes a difference.
Without any code it's all I can help you at this moment.
Edit
<link rel="stylesheet" href="./css/style.css">
<!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">-->
As I can see you were indeed importing bootstrap after your own CSS rules. That way Bootstrap is going to override your classes in your CSS files. To get around this flip the order of these two statements so your CSS has prevalence over what Bootstrap states.
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
Also, if you're not providing any font-family attributes in your CSS it's going to use Bootstrap's default. Don't forget to override all necessary classes AND elements (body, p, div...).
Further info on how to apply theming in your own Bootstrap instance can be found here, in the official Bootstrap docs.
Extra tip while debugging: Check in the developer environment you're not getting any 404 in the network requests regarding your links to your own stylesheets since it feels like your styles are not working but actually they are never reaching the browser
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
Compiler tends to read code from line 1. If you put bootstrap.css after the style.css. Definitely bootstrap.css will overwrite style.css.
hi Tharuka Dananjaya,
the problem was totally made from bootstrap external css only.
how to solve?
1. first to check which section is breaking and inspect the element, you can see
the browser take the boostrap css not your style.
so what to do , make that particular css as !important
eg: color:red!important;
make your style high priority!
copy your whole code from style.css, and paste in your html page
as internal css styling way, which means put in b/w head and body.
I try to integrate Lightbox2 in an existing website.
Head Code:
<head>
<link rel="stylesheet" media="screen" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="/css/lightbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/lightbox.js">
</head>
Image Code:
<div class="image-wrapper">
<a href="/img/projects/folder/image_big.jpg" data-lightbox="lightboxImage">
<img src="/img/projects/folder/image_thumbnail.jpg" alt=" " class="project-image">
</a>
</div>
My problem is when I click the thumbnail it only opens the big image in a blank browser window instead of opening it in a lightbox.
I already checked the paths. And the browser console shows no errors.
I think I just missed something. But I don't know what it could be.
Would appreciate some help. Thank you!
According to instruction from the Lightbox2 Homepage you have to put the script tag refering to /js/lightbox.js file at the bottom of the </body> tag.
Include the Javascript at the bottom of your page before the closing <body> section:
<script src="path/to/lightbox.js"></script>
<span class="glyphicon glyphicon-calendar"></span>
This is my code. I wanted to add Date Icon but its not displaying . Its displaying some kind of default icon , something like rectangle with text EIo9 .I'm using latest bootstrap link
If you are adding this link to your page then, it should work.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
Make sure your assets directory location are correct? like css,images and fonts i.e.
All you need is bootstrap css file getting included in a right way.
You can take it from localhost or CDN so the code will be:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<span class="glyphicon glyphicon-calendar"></span>
Here's the working example. Good luck!
I have a page1 including page2 with "iframe" tag,both of these two pages link to the same stylesheet,everything works fine,until i press "F12" to toggle developer tool in IE10,some of the classes miss styles defined in the css file suddenly,and the two pages go into a wrong display. Can anyone help?
there are two methods to solve this problem, change the class name or add a timestamp after style url. Why?
This is a bug in IE10.
You can add a query string in page2 to fix this bug:
page2:
<link rel="stylesheet" href="css/base.css?t=2013" />
<link rel="stylesheet" href="css/layout.css?t=2013" />
page1:
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/layout.css" />