I try to add MDL icons to the button in my project, but both span and i elements don't work. Snippet speaks for itself.
<head>
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
</head>
<body>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<span class="mdi mdi-cart"></span>
<i class="mdi mdi-cart"></i>
Click me
</button>
</body>
Also feel free to test it on jsFiddle: https://jsfiddle.net/dut6g8xn/2/
You can take reference from the below link for more icons.
enter link description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link
rel="stylesheet"
href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
</head>
<body>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class="large material-icons">add_a_photo</i> Click me
</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class="large material-icons">account_balance</i> Click me
</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class="large material-icons">accessibility</i> Click me
</button>
</body>
</html>
I don't think material icons work in buttons, I used to use them but I switched over to fontawesome you can search for icons at fontawesome.com. W3Schools also use them a lot they have a tutorial on them here w3schools.com/icons/fontawesome5_intro.asp. FontAwesome should work in buttons because I have used it before to do so.
<html>
<head>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' crossorigin='anonymous'>
</head>
<body>
<button><i class='fas fa-user-circle'></i></button>
</body>
</html>
Hope that helped.
Related
I added
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
to index.html
but I can't show the icon on the web page it shows the icon name as a string.
I tried
<span class="material-icons-outlined">
done
</span>
but it does not work.
You can show Material icons on the web page using this code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>
</body>
</html>
Example
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>
I did the exact required steps in the website and still it doesn't work..
<script src="https://use.fontawesome.com/3e91539bf3.js"></script>
<div class="navbar">
<i class="fas fa-user-friends"></i>About Me
<i class="fas fa-person-booth"></i>My Builds
<i class="fas fa-clock"></i>Get in-touch
</div>
give this a try it should work .
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js"></script>
I can say that's because of the version mismatch, you can try font awesome 4.7 as it is included in bootstrap cdn.
Copy to the head of html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<i class="fa fa-5x fa-cog fa-fw" aria-hidden="true"></i>
<i class="fa fa-camera-retro fa-5x"></i>
</body>
</html>
I'm trying to keep list buttons at same align but i dont know how to do it if text is long button's position changes automatically
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="revisit-after" content="1 days">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/css/mdb.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://asd.online/css/index.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>YeniPDF</title>
</head>
<body>
<div class="container">
<ul class="list-unstyled row" style="text-align:center;">
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="
a
" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
<li class="list-group-item col-4"><form action="" id="sorgu" method="get"><img alt="EXP" src="a" width="100"" height="120"><div class="hizala">EXAMPLE EXAMPLE EXAMPLE</div>
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i>
</button></form></li>
</ul>
</div>
</body>
</html>
i'm not using any specific css just bootstrap 4 this is js fiddle https://jsfiddle.net/ygoqmb14/2/
Try add min-height for .hizala class
.hizala {
min-height: 130px;
}
I am trying to learn Materialize (materializecss.com) and I am stuck with how to make action buttons. The button on the lower left hand corner appears, but when I hover, the other buttons do not then appear.
<!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>
<script type="text/javascript" src="js/materialize.min.js"></script>
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a><i class="material-icons">publish</i></a></li>
<li><a><i class="material-icons">publish</i></a></li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
</body>
</html>
Help! Thanks in advance.
I have added jquery in code and its working fine for me,
See my code below:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a><i class="material-icons">publish</i></a></li>
<li><a><i class="material-icons">publish</i></a></li>
</ul>
</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
If I set the max-width property for mdl-layout__header-row class, the dropdowns are not working properly, they are misaligned. Remove the max-width property and everything works fine.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test Page</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.red-light_blue.min.css" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<header class="mdl-layout__header">
<div class="mdl-layout__header-row" style="max-width: 1200px;width: 100%;margin: auto;">
<a href="/">
<img style="height: 60px;" src="http://www.vwshops.com/dummy-store-1/img/my-shop-logo-1452186152.jpg" />
</a>
<span>Logo</span>
<button id="DROPDOWN_RIGHT" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">arrow_drop_down</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_RIGHT">
<li class="mdl-menu__item">One</li>
<li class="mdl-menu__item">Two</li>
<li class="mdl-menu__item">Three</li>
</ul>
<button style="margin-left: auto;" id="DROPDOWN_LEFT" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">arrow_drop_down</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_LEFT">
<li class="mdl-menu__item">One</li>
<li class="mdl-menu__item">Two</li>
<li class="mdl-menu__item">Three</li>
</ul>
</div>
</header>
</body>
</html>
Add position:relative. This stops the positioned elements straying out of line in .mdl-layout__header-row div. When elements are positioned using absolute positioning you need to setup a parent container to position them off and do that by setting a position:relative for them - otherwise it will be to the outermost html element / document they position off.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test Page</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.red-light_blue.min.css" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<header class="mdl-layout__header">
<div class="mdl-layout__header-row" style="max-width: 1200px;width: 100%;margin: auto; position:relative;">
<a href="/">
<img style="height: 60px;" src="http://www.vwshops.com/dummy-store-1/img/my-shop-logo-1452186152.jpg" />
</a>
<span>Logo</span>
<button id="DROPDOWN_RIGHT" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">arrow_drop_down</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_RIGHT">
<li class="mdl-menu__item">One</li>
<li class="mdl-menu__item">Two</li>
<li class="mdl-menu__item">Three</li>
</ul>
<button style="margin-left: auto;" id="DROPDOWN_LEFT" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">arrow_drop_down</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect language-menu" for="DROPDOWN_LEFT">
<li class="mdl-menu__item">One</li>
<li class="mdl-menu__item">Two</li>
<li class="mdl-menu__item">Three</li>
</ul>
</div>
</header>
</body>
</html>