Align material icon with text on Materialize
That's one way to do it. Of course it depends on the icon, you have to find the specific font-size
that will fit the icon's height. Examples:
#txt1{
font-size:28px;
line-height:24px;
}
#txt2{
font-size:36px;
line-height:24px;
}
#txt3{
font-size:21px;
line-height:24px;
}
.material-icons{
display: inline-flex;
vertical-align: top;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<span id="txt1">ID</span><i class="material-icons">info_outline</i>
</br>
<span id="txt2">ID</span><i class="material-icons">settings_cell</i>
</br>
<span id="txt3">ID</span><i class="material-icons">stay_primary_landscape</i>
align material icon with the text
Set the icon <i>
to vertical-align: middle;
.
I would also remove the <span>
tags, they're not really doing anything.
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
.material-icons {
vertical-align: middle; /* new */
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
background-color: red;
display: inline;
}
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.alert-info {
color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
}
<div class="alert alert-info" role="alert">
<i class="material-icons">face</i> Test
</div>
Align icon with text in drowdown materialize
Applying
{
display: flex;
align-items: center;
}
to your dropdown seems to do it:
$('.dropdown-trigger').dropdown();
#dropdown1 li>* {
display: flex;
align-items: center;
}
#dropdown1 {
width: auto !important;
}
/* optional */
#dropdown1 a> i {
margin-right: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">Profile</a></li>
<li><a href="#!">Receipts</a></li>
<li class="divider"></li>
<li><a href="#!">Logout</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>five</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>six</a></li>
</ul>
Align material icon vertically
You might have tried various styling
to arrange your icons
, but you need to target your icons i.e. i tag
as below and style,
.footer-links > li > a > i{
vertical-align:middle;
}
Check this two jsFiddle
, I have added background
to one just for understanding purpose.
https://jsfiddle.net/dbwaoLrh/2/
https://jsfiddle.net/dbwaoLrh/4/
Align icon and two lines of text with materialize css
.d-flex {
display: flex
}
.text {
flex-direction: column;
margin-left: 10px;
}
.fa-map-marker.marker {
font-size: 35px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col s12 m3 center d-flex">
<i class="fa fa-map-marker marker"></i>
<div class="d-flex text">
<span>Horario</span>
<span>Helper text</span>
</div>
</div>
How to center align an ICON inside a BUTTON in materialize css navbar?
You have just to add line-height: 45px
to your icon
, scince you added the height:45px;
to your button , just like this :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="navbar-fixed">
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">LOGO </a>
<ul class="right hide-on-med-and-down">
<li>
<form class="orange" style="">
<div style="display: inline-flex; border: 1px black solid; align-items: center;">
<input id="search-bar" type="search" placeholder="text text..." style="border: 1px red solid; margin: 0; height: 100%;">
<button class="btn" type="submit" style="background: blue; height:45px;">
<i class="material-icons" style="border: 1px red solid; display: inline; margin: auto;line-height:45px;">search</i>
</button>
</div>
</form>
</li>
<li>
<a href="#home">Home</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
How to put an icon and p tag aligned on the same line (materializecss)
To do this the materialize way, just add a class of left to the icon:
<i class="material-icons left">person</i>
<p>123123</p>
The documentation for button sheds some light on this - this is where we traditionally see text and icons side by side in the framework.
https://materializecss.com/buttons.html
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
@927tanmay's answer is technically correct - the left class just adds float:left to the element - but there's no need to write inline or extra css as the left class is part of the documentation and intended to be used with icons.
See more on the helpers section.
Related Topics
Is There a Way via CSS to Set the Image Height to the Line-Height
When Does Flex-Grow Switch to Flex-Shrink, and Vice-Versa
How to Style Anonymous Flex Items Explicitly
Finding "Equivalent" Color with Opacity
Why Is Gmail Blocking CSS in Emails
Position One Element Relative to Another in CSS
My Fixed Background Made Scrolling the Site Very Slow, What How to Do to Improve It
Bootstrap Modal Window Inside Another Div
How to Avoid One Word on the Last Line with CSS
Increase Size of List-Style-Bullet Type
Why Does Width/Height Work on an Inline Img Element
CSS Variable Calculation of Hsl Values
Switching to Em-Based Media Queries
CSS Div Width Percentage and Padding Without Breaking Layout
How to Change Bootstrap's Global Default Font Size
How to Position Background Image in Bottom Right Corner? (Css)