css - 添加推特图标并正确对齐它们

Question

是否有物化社交媒体(主要是 Twitter)图标的任何来源？

目前我考虑过内置测试。但它没有正确对齐。有什么帮助吗？

另外，我希望第一行有 4 列。但是当列时它只显示 2 个。为什么？

在此链接中:https://jsfiddle.net/karimkhan/nzxd5r3r/6/

虽然我应用了 4 列，但图标似乎未对齐，在第一个原始 2 列中。

有没有办法为每个标签添加 Twitter 图标？

   <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>

Answer 1

关于图标对齐，我猜您的意思是您希望“重复”图标与“转推”文本的行高对齐。您可以通过添加以下内容来实现:

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

这是可能的，因为图标有 display: inline-block。行内 block 元素有垂直对齐选项