I'm following the instruction in Google's Material Icons Guide but for some reason it does not work when I tested it in JSFiddle. The icon/image of a face do not show up.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<i class="material-icons md-48"></i>
you just need to include the link to the font and then use it:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<i class="material-icons">face</i>
working JSFiddle example
Related
I added cdn to next.js head section but it does not work.
import Head from "next/head";
<Head>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
></link>
</Head>;
I tried to render this simple icon but it does not show any icon. it just simply shows string "add"
<i className="material-icons">add</i>
I came across the same problem and the following worked for me:
Add the Google Material Icon CSS to the globals.css file instead of the xxxx.module.css. After I did this, icon name worked
The workaround I found is to use Code point instead of the icon name:
<Head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
</Head>
<span className="material-icons"></span>
I solved this by disabling font optimization: https://nextjs.org/docs/basic-features/font-optimization
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'm trying to use the Material Icons font from Google Outlined set that just came out, but I can't figure it out. There is no information nor documentation.
Some icons are being displayed as filled and some as outlined.
eg: The account_circle icon from the Outlined set
How are you supposed to use the Outlined set? Any help is appreciated.
Update as of 2021
In short Google isn't (still) advertising the fact that you can load the different set via the Google API url on the Material Icons website. They are only, as per Google Material Icons instructions, talking about the default filled set which uses the following html tag to enqueue the Material Icons base stylesheet.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
If you want to use the Outlined, the Two Tone, Round or Sharp sets, you need to add the following to the Material Icons url.
Theme
URL parameters
CSS class
Filled (Default)
?family=Material+Icons
material-icons
Outlined
?family=Material+Icons+Outlined
material-icons-outlined
Two Tone
?family=Material+Icons+Two+Tone
material-icons-two-tone
Round
?family=Material+Icons+Round
material-icons-round
Sharp
?family=Material+Icons+Sharp
material-icons-sharp
Better performances
Like Google text-based font, Google Material Icons also accept the &display=swap url parameter.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">
You can learn more about &display=swap # https://developers.google.com/web/updates/2016/02/font-display
You can also specify a <link rel="preconnect" tag in the <head> of your document to improve load performances.
<link rel="preconnect" href="https://fonts.gstatic.com">
Example
<!--head-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">
<!--body-->
<span class="material-icons-two-tone">
account_circle
</span>
<span class="material-icons-two-tone">
check_circle
</span>
<span class="material-icons-two-tone">
favorite
</span>
Update, with Answer:
Looking at the Readme in the source code, https://github.com/mui-org/material-ui/tree/master/packages/material-ui-icons
You Append Outline to the icon name. So for you:
import { AccountCircleOutline } from "#material-ui/icons";
or
import AccountCircleOutline from "#material-ui/icons/AccountCircleOutline";
I do believe this answers your question. A "correct answer" is always nice! Thanks!
I am using the official google material icons: https://material.io/icons/
I want add some icons created by me, in svg.
how can I do it?
You will need to create your own web font.
If you've already got SVGs then you can possibly use something like https://icomoon.io/app/ to create one. I've not used it so can't help any further with that.
If not, you'll need to find a font authoring tool that exports to woff or woff2 or whatever web font format you need. (I think the material one is woff2)
About more it enter link description here
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<title></title>
</head>
<body>
<i class="material-icons md-light md-inactive">face</i>
</body>
</html>