Question

我添加了w3 col来分隔一些地址。现在我想在地址和电话等前面添加图标但是它无法使用。代码中的朋友有什么不对？

<p style="font-size:24px;">Keep In Touch With Us</p>
<div class="w3-row">
  <div class="w3-col w3-container" style="width:19%; margin-left:2%;">
  <p> 
 <ul class="demo"> 
 <li><i class="fa fa-map-marker" aria-hidden="true"></i> Pink Maid Beauty Salon (Main Centre), <br>No. 789, <br>High Level Road, <br> Colombo 02</li>
  <li><i class="fa fa-phone" aria-hidden="true"></i> 011-2298024 <br>077-3053912</li>
  <li>pinkmaidbeautysalon@gmail.com</li>
  <li>8.00 A.M - 6.00 P.M</li>
   
</ul></div>

  <div class="w3-col w3-container" style="width:19%">
  <p><ul class="demo"> 
  <li><i class="fa fa-map-marker" aria-hidden="true"></i> Pink Maid Beauty Salon (Branch), <br>No.261/1, <br> Sri Dewamiththa Rd, <br>China Garden,Galle</li>
  <li>091-2212345 <br> 071-4229276</li>
 <li>pinkmaidbeautysalon@gmail.com</li>
  <li>8.00 A.M - 6.00 P.M</li>
    
</ul></div>

Answer 1

我用字体awesome url更新了代码。它似乎工作。请检查。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<p style="font-size:24px;">Keep In Touch With Us</p>
<div class="w3-row">
  <div class="w3-col w3-container" style="width:19%; margin-left:2%;">
  <p> 
 <ul class="demo"> 
 <li><i class="fa fa-map-marker" aria-hidden="true"></i> Pink Maid Beauty Salon (Main Centre), <br>No. 789, <br>High Level Road, <br> Colombo 02</li>
  <li><i class="fa fa-phone" aria-hidden="true"></i> 011-2298024 <br>077-3053912</li>
  <li>pinkmaidbeautysalon@gmail.com</li>
  <li>8.00 A.M - 6.00 P.M</li>
   
</ul></div>

  <div class="w3-col w3-container" style="width:19%">
  <p><ul class="demo"> 
  <li><i class="fa fa-map-marker" aria-hidden="true"></i> Pink Maid Beauty Salon (Branch), <br>No.261/1, <br> Sri Dewamiththa Rd, <br>China Garden,Galle</li>
  <li>091-2212345 <br> 071-4229276</li>
 <li>pinkmaidbeautysalon@gmail.com</li>
  <li>8.00 A.M - 6.00 P.M</li>
    
</ul></div>

＆＃13;

将字体真棒图标添加到w3 col

1 个答案: