CODEWITHSUNDEEP
csshtmltwitter-bootstraptwittermaterial-design
cyclic
cyclic

Reputation: 217

Adding twitter icons and aligning them properly

Is there any source for materialize social media (mainly twitter) icons?

For now I have considered inbuilt for testing. But it does not appear with proper alignment. Any help for this?

Also I want 4 columns in first row. But it displays only 2 when columns. why?

In this link: https://jsfiddle.net/karimkhan/nzxd5r3r/6/

Icons seems unaligned, in first raw 2 cols though I applied 4 cols.

Is there any way to add twitter icons for each tag?

   <div class="container">
        <div class="row">
                <div class="col s3 m5">
                    <div class="card-panel green accent-4">
                      <span class="white-text">Tweets
                      </span>
                    </div>
                </div>
                <div class="col s3 m5 ">
                    <div class="card-panel deep-orange accent-2">
                         <i class="material-icons">repeat</i>
                      <span class="white-text">Retweet
                      </span>
                    </div>
                </div>
                <div class="col s3 m5">
                    <div class="card-panel green accent-4">
                      <span class="white-text"> Favourite
                      </span>
                    </div>
                </div>
                <div class="col s3 m5 ">
                    <div class="card-panel deep-orange accent-2">
                      <span class="white-text"> Score
                      </span>
                    </div>
                </div>
        </div>
        <div class="row">
                <div class="col s4 m5">
                    <div class="card-panel teal">
                      <span class="white-text">I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
                      </span>
                    </div>
                </div>
                <div class="col s4 m5">
                    <div class="card-panel light-blue accent-4">
                      <span class="white-text">I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
                      </span>
                    </div>
                </div>
                <div class="col s4 m5">
                    <div class="card-panel light-blue accent-4">
                      <span class="white-text">I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
                      </span>
                    </div>
                </div>
        </div>

Upvotes: 0

Views: 96

Answers (2)

imGaurav
imGaurav

Reputation: 1053

In order to get 4 columns structure in first row you need to change col s3 m5 to col s3 m3. which means that in your 12 columns grid you have 4 cards,each card will occupy 3 columns(m3 + m3 + m3 + m3 = 12 ) when screen size is medium (i.e more than 601px as mentioned in your css).

for more information please visit the link below :

http://materializecss.com/grid.html

Upvotes: 1

Hacktisch
Hacktisch

Reputation: 1514

About the icon alignment, I guess you mean you want the 'repeat' icon aligned with the line height of the 'retweet' text. You can achieve this by adding:

.material-icons{
    vertical-align: middle;
}

This is possible because the icons have display: inline-block. Inline-block elements have vertical-alignment options

Upvotes: 1

Related Questions