您可以在Foundation pre/postfix標籤和操作中使用Foundation Icons嗎？

Question

我試圖使用從基金會的圖標集旁軌形成輸入日曆圖標，並想出一個快速的方法來對準兩個同時使它看起來好是使用基金會的後綴標籤。在此之後的截圖，這表明它們是兼容的，但讓他們優先考慮的主要互相對準我的代碼失敗的情況發生：

<div class="row collapse"> 
    <div class="fourteen mobile-three columns"> 
    <label for="fundraiser-expire-at">End Date</label> 
    <%= form.text_field 'expire_at', 
         class: 'datepicker' %> 
    </div> 
    <div class="two mobile-one columns"> 
    <span class="postfix"> 
     <i class="general enclosed foundicon-calendar show_datepicker"></i> 
    </span> 
    </div> 
</div> 

有誰知道一種方法我能得到我在找的東西嗎？它需要CSS嗎？我敢肯定，CSS是一種解決方案，我只是想知道我是否可以使用基金會建在造型得到這個工作...

Answer 1

我考慮刪除這個問題，因爲它結束了一個非常簡單的辦法，但我認爲，這個問題持續存在，有人，有些人，可能會受益。問題在於標籤與輸入在十四列的相同部分。後綴盡最大努力與標籤和輸入的組合對齊。如果將標籤放在十四列之外，以便輸入是該部分的唯一成員，則後綴與輸入對齊。

Answer 2

添加到傑克史密斯的答案，我將展示改變，使其後綴得到很好地與現場一致。下面的示例使用Foundation 5.1.1和Ruby on Rails 3.2。

<div class="row"> 
    <div class="large-4 columns"> 
     <div class="row collapse"> 
     <div class="small-9 columns"> 
      <%= f.label :altitude %> <!-- This line here must be moved outside this div --> 
      <%= f.text_field :altitude %> 
     </div> 
     <div class="small-3 columns"> 
      <span class="postfix radius">meters</span> 
     </div> 
     </div> 
    </div> 
    </div> 

這會導致未對齊的字段和標籤。

如果我們將其更改爲：

<div class="row"> 
    <div class="large-4 columns"> 
     <div class="row collapse"> 
     <%= f.label :altitude %> <!-- Now it is happy and aligned :-) --> 
     <div class="small-9 columns"> 
      <%= f.text_field :altitude %> 
     </div> 
     <div class="small-3 columns"> 
      <span class="postfix radius">meters</span> 
     </div> 
     </div> 
    </div> 
    </div>