I need help with Material icons that are displaying as text.
I have linked to material-icons font library in the section my HTML file, but issue still exists.
I intend to use the sharp icons and I have included that in my material icons link.
Regardless, I can't get the icons to display. All that is shown is text in place of the icons
How do I fix this? Or where I'm I going wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width" , initial-scale="1.0">
<title>Sales Dashboard</title>
<!-- Material cdn-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
<!-- stylesheet-->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<aside>
<div class="top">
<div class="logo">
<img src="./images/logo.png" alt="">
</div>
<div class="close" id="close-btn">
<span class="material-symbols-sharp">close</span>
</div>
</div>
<div class="sidebar">
<a href="#">
<span class="material-symbols-outlined">dashboard</span>
<h3>Dashboard</h3>
</a>
<a href="#">
<span class="material-symbols-outlined">dashboard</span>
<h3>Detail Report</h3>
</a>
<a href="#">
<span class="material-symbols-outlined">person</span>
<h3>Team Member</h3>
</a>
<a href="#">
<span class="material-symbols-sharp">trending_up</span>
<h3>Top Selling Products</h3>
</a>
<a href="#">
<span class="material-symbols-sharp">payments</span>
<h3>Expenses</h3>
</a>
<a href="#">
<span class="material-symbols-sharp">logout</span>
<h3>Logout</h3>
</a>
</div>
</aside>
</div>
</body>
</html>
You have to use the correct URLs for both the outlined and sharp variants as provided by the documentation.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD#48,400,0,0" />
<!-- Material cdn-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD#48,400,0,0" />
<span class="material-symbols-sharp">close</span>
<span class="material-symbols-outlined">dashboard</span>
<span class="material-symbols-outlined">person</span>
<span class="material-symbols-sharp">trending_up</span>
<span class="material-symbols-sharp">payments</span>
<span class="material-symbols-sharp">logout</span>
Related
I need to make the name: Data Science in the header and in the footer i need to make
an a Steve Jacob. How can i make this, if i try it looks like wery bad it overlaps the left menu. There is how cite looks like:
There is my index.html:
Again, how can i make some notice in the footer and header which doesn't overlaps the left menu.
imgsize {
width: 30%;
height: 30%;
margin-left: 30%;
display: block;
}
<head>
<title>Главная</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<div class="wrapper d-flex align-items-stretch">
<nav id="sidebar">
<div class="custom-menu">
<button type="button" id="sidebarCollapse" class="btn btn-primary">
<i class="fa fa-bars"></i>
<span class="sr-only">Toggle Menu</span>
</button>
</div>
<div class="p-4 pt-5">
<ul class="list-unstyled components mb-5">
<img class="imgsize" src="{% static 'media/logo.png' %}" alt="">
<li class="active">
Главная
</li>
<li>
Востребованность
</li>
<li>
География
</li>
<li>
Навыки
</li>
<li>
Последние вакансии
</li>
</ul>
<div class="footer">
<p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</nav>
<!-- Page Content -->
<div id="content" class="p-4 p-md-5 pt-5">
<h2 class="mb-4">Sidebar #02</h2>
</div>
</div>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/popper.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/main.js"></script>
</body>
<footer>
</footer>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>David Chu's China Bistro'</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght# S300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght#0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<!--here container is used and not container-fluid because there is little info on this homepage thus we don't want the width to stretch to the full width of the screen-->
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg">
<div id="logo-img" alt="Logo image"></div><!--the id #logo-img is responsible to print the logo-->
</a>
<div class="navbar-brand">
<h1>David Chu's China Bistro</h1>
<p>
<img src="images/K-star-logo.jpg" id="K-logo" alt="Kosher certification" />
<span>Kosher certified</span>
</p>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<!--used to display our menu items(use unordered list)-->
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"<!--glyphicon is used to import the image of the cutlery and let it behave as a font--></span><br class="hidden-xs" /><!--break tag is used here to remove the Menu word when we reach the breakpoint-->Menu
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span><br class="hidden-xs" />About
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span>
<br class="hidden-xs" />Awards
</a>
</li>
<li id="phone" class="hidden-xs">
<a href="tel:410-602-5008">
<span>410-602-5008</span>
</a><div>*We Deliver</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
My code is responsible for displaying the navbar of a website. When my screen is at full-page i am getting next to the restaurant's name "menu", "awards" and "About".
When the page is squeezed (or website used on a phone), I need the "menu", "awards" and "About" buttons to disappear and display in their place a toggle navigation button that when clicked will display those 3 buttons, which is not happening.
In the following simple document, neither of the dropdown menus actually drop down when clicked. The first one is copy-pasted from the Materialize website. I'm viewing this with Firefox on a Linux. I've moved some files around so that's why the file paths are slightly different, but the developer console shows no error (except the thing about character encoding not declared). Everything I've implemented from the Materialize site up to this has correctly rendered, and I've checked that the JavaScript code is running.
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="../css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<ul id="dropdown2" class="dropdown-content">
<li>one<span class="badge">1</span></li>
<li>two<span class="new badge">1</span></li>
<li>three</li>
</ul>
<a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a>
<div class="row">
<div class="col s3">
Drop Menu <i class="material-icons right">arrow_drop_down</i>
<ul id="dropdown2" class="dropdown-content">
<li>Home</li>
<li>Map</li>
<li>1. Prehuman</li>
<li>2. Ancient</li>
<li>3. Classical</li>
</ul>
</div>
<div class="col s9">
<div class="section hoverable z-depth-2">
<h5 class="center-align">Section header</h5>
<p class="flow-text"> AAAAAAAAAAAAAAAA BBBBBBBBBBBBBBBBBBBBBB CCCCCCCCCCCCCCCCCCC DDDDDDDDDDDDDDDDDDD</p>
<img src="../images/pic.png" alt="" class="responsive-img">
<div class="video-container">
<iframe src="../videos/vid.mp4" width="800" height="500" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="../js/materialize.min.js"></script>
</body>
</html>
I've tried variations on this where I've replaced data-target with data-activates and replaced dropdown-trigger with dropdown-button, but the behavior is the same. The button itself shows, and when the mouse hovers over it transforms to a click symbol. But when you click, nothing happens.
I think you just forgot to initialize materialize M.AutoInit(); https://materializecss.com/auto-init.html
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<ul id="dropdown2" class="dropdown-content">
<li>
<a href="#!">one
<span class="badge">1</span>
</a>
</li>
<li>
<a href="#!">two
<span class="new badge">1</span>
</a>
</li>
<li>
three
</li>
</ul>
<a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown
<i class="material-icons right">arrow_drop_down</i>
</a>
<div class="row">
<div class="col s3">
<a href="#!" class="btn dropdown-button" data-activates="dropdown2">Drop Menu
<i class="material-icons right">arrow_drop_down</i>
</a>
<ul id="dropdown2" class="dropdown-content">
<li>Home</li>
<li>Map</li>
<li>1. Prehuman</li>
<li>2. Ancient</li>
<li>3. Classical</li>
</ul>
</div>
<div class="col s9">
<div class="section hoverable z-depth-2">
<h5 class="center-align">Section header</h5>
<p class="flow-text"> AAAAAAAAAAAAAAAA BBBBBBBBBBBBBBBBBBBBBB CCCCCCCCCCCCCCCCCCC DDDDDDDDDDDDDDDDDDD</p>
<img src="../images/pic.png" alt="" class="responsive-img">
<div class="video-container">
<iframe src="../videos/vid.mp4" width="800" height="500" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<script>
M.AutoInit();
</script>
</body>
</html>
I'm quite new to CSS and bootstrap here.
I am trying to align a list on the navbar horizontally but I can't figure out what's wrong.
Instead of aligning them side by side, it seems to align one below the other, which is not what I'm looking for.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" contents="IE=edge">
<meta name="viewport" content="width=device-width, initial scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/terms.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
<title>Terms of Service</title>
</head>
<body>
<!--Header-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="Bet Coins">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<b>Terms of Service<b>
</li>
<li>
<b>Legal Guidelines</b>
</li>
<li>
Privacy Policy
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS code:
.navbar{height:95px;}
.body{background-color: #000000;color: #FFFFFF;}
.navbar-nav li a{line-height: 64px;}
Image:
This is a really small thing, but you need to be careful to close all your tags properly; if you close the <b> tags in your <li> then it works. Apart from that your markup is correct. It should look like this:
<li class="active">
<b>Terms of Service</b>
</li>
<li>
<b>Legal Guidelines</b>
</li>
<li>
Privacy Policy
</li>
I also added a closing slash to the <img> tag here:
<img src="images/logo.png" alt="Bet Coins" />
but I think that's less crucial than closing the <b> tags properly.
Demo here:
http://jsfiddle.net/6804py5w/1/
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my garage</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<body>
<div class="navbar navbar-inverse" >
<div class="container">
<a href="#" class="navbar-brand" >MyGarage</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse" >
Rooms
</button>
<div class = "collapse navbar-collapse navHeaderCollapse" >
<ul class="nav navbar-nav navbar-right">
<li>Garage</li>
<li>Toilet</li>
</ul>
</div>
</div>
</div>
<h1> List of posts (yet ;) ) </h1>
<br /><br /><br /><br />
Add Post
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</head>
</html>
Can someone explain why the tag was not rendered in firefox? I'm playing with twitter bootstrap.
What I wanted was to have a drop-down button called "Rooms" in the nav-bar which drops down "Garage" and "Toilet"
Thankyou
replace this markup
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my garage</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
</head>
<body>
<div class="navbar navbar-inverse" >
<div class="container">
<a href="#" class="navbar-brand" >MyGarage</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse" >
Rooms
</button>
<div class = "collapse navbar-collapse navHeaderCollapse" >
<ul class="nav navbar-nav navbar-right">
<li>Garage</li>
<li>Toilet</li>
</ul>
</div>
</div>
</div>
<h1> List of posts (yet ;) ) </h1>
<br /><br /><br /><br />
Add Post
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>