Phông chữ Căn chỉnh biểu tượng tuyệt vời bên trong md-nút

Question

Tôi đang cố gắng căn chỉnh các biểu tượng phông chữ tuyệt vời bên trong một nút để chúng được căn giữa theo văn bản trên thanh công cụ. Tôi có đánh dấu sau;

<div ng-app="app"> 
    <md-toolbar> 
     <div class="md-toolbar-tools" md-tall""> 
     <h2> 
      <span>Icons</span> 
     </h2> 
     <md-button class="md-icon-button"> 
      <md-icon md-font-icon="fa-circle" class="fa"></md-icon> 
     </md-button> 
     <md-button class="md-icon-button"> 
      <md-icon md-font-icon="fa-circle" class="fa fa-lg"></md-icon> 
     </md-button> 
    </div> 
    </md-toolbar> 
</div> 

Tạo bố cục sau;

fa-lg vào biểu tượng thứ hai làm cho nó trông trung mặc dù tôi nghi ngờ nó vẫn được liên kết đến đỉnh. Tôi đã cố gắng gắn bó layout-alignment="center center" trên md-button để không có hiệu lực.

Làm cách nào để kiểm soát việc căn chỉnh các biểu tượng phông chữ tuyệt vời bên trong các nút md và, cụ thể cách tôi có thể căn giữa các biểu tượng này trong thanh công cụ? Có một cách vật liệu góc để làm điều này liên kết, hoặc là tùy chỉnh CSS cần thiết ở đây?

CodePen

Answer 1

Nó dường như là 24px chiều cao cố định trên lớp .md-icon đó là rối tung với sự liên kết dọc. Biểu tượng FontAwesome là chiều cao động, do đó chiều cao cố định trên phần tử có nghĩa là phần giữa của phần tử không còn ở giữa biểu tượng nữa. Hãy thử ghi đè điều này với height: auto; và nó sẽ hoạt động một cách vui vẻ.

Answer 2

Hãy thử css này

.md-icon-button .fa-circle { 
    font-size: 23px; 
    width: auto; 
} 

Answer 3

Chiều cao gia tăng đối với md-icon đang gây ra vấn đề

md-icon {  
    height: 24px;  
} 

Bạn cần phải thêm một số thêm lớp thích sau

<md-icon md-font-icon="fa-circle" class="fa **fa-md**"></md-icon> 

và cần phải ghi đè chiều cao

.fa-md { 
    height: auto; 
} 

Answer 4

Tôi đã kiểm tra phiên bản mới nhất của Vật liệu góc (1.1.1) và sự cố này đã biến mất. Thưởng thức!