CODEWITHSUNDEEP
htmlcssmaterial-designmaterialize
iscream
iscream

Reputation: 790

How to put an icon and p tag aligned on the same line (materializecss)

I am using materialize css along with material icons, trying to put an icon and beside that a few numbers, but I don't know how to. Here is the code:

<i class="material-icons">person</i>
<p>123123</p>

would be awesome if someone could help!

Upvotes: 0

Views: 4001

Answers (5)

Sean Doherty
Sean Doherty

Reputation: 2378

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.

Upvotes: 1

The Fool
The Fool

Reputation: 20467

The display property

The Display property is essentially responsible for determining how to layout your elements.

Display Block

The good old div for example has by default a display property of block. This means it will fill up the entire available width and every element after is rendered on a new line. It also makes sense if you think about the word block.

<div>Div's display defaults to block</div>
<div>Div's display defaults to block</div>

Display Inline

Now the other famous tag is span which has a display property of inline. This will not break onto a new line. It also makes sense if we think about the word itself inline.

<span>span's display defaults to inline</span>
<span>span's display defaults to inline</span>

You see, we have a very basic way of saying I want to be laid out vertically or I want this to be laid out horizontally.

Other methods

Over the years the demand for more sophisticated ways to layout things rose. Back in the day people would use float but that has many drawbacks. Nowadays we have two powerful tools in our CSS toolbox. Flexbox and CSS Grid.

When using flex box you can think of a single axis that can be used to lay out elements, while CSS grid offer a true 2d space that can be used. I leave it to the reader to explore these more.

Upvotes: 1

Arian Shahalami
Arian Shahalami

Reputation: 1449

I didn't understand you very well but I assume that you want to put numbers and icon next to each other so you have to put them inside a div tag then style the div like this: 

<div style="display:flex;">
   <i class="material-icons">person</i>
   <p>123123</p>
</div>

browsers may apply some styles on <p> like margin so you have set margin:0 to <p> if you need it.

Another way to get same result is setting display property of both <p> and <i> to "inline-block"

Upvotes: 1

927tanmay
927tanmay

Reputation: 136

You have to just add "float: left" style property to your icon tag. Try the below code. 

  <i class="material-icons" style="float:left">person</i>
  <p>123123</p>

Upvotes: 1

oreopot
oreopot

Reputation: 3450

Replace your code with the following:

<p><i class="material-icons">person</i>123123</p>

Upvotes: 2

Related Questions