雖然我已經正確引用了引導程序，但並未顯示相機和視頻圖標

我花了幾個小時試圖找出我的代碼有什麼問題bur似乎無法找出問題所在，下面一行應該顯示圖標相機和圖像，但它並沒有在網頁中顯示：雖然我已經正確引用了引導程序，但並未顯示相機和視頻圖標

<i class="fa fa-image"></i> or <i class="fa fa-video-camera"></i>

這是全班同學home.blade.php：

@extends('layouts.app') 

    @section('content') 
     <head> 
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

     </head> 
     <div class="container"> 

      <div class="row"> 
       {{--Friend request--}} 
       <div class="col-md-8 col-md-offset-2"> 
        @if ($available_req_count > 0) 
         <div class="alert alert-danger alert-dismissable"> 
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> 
          <strong>Your have pending friend request 
           <a href="{{ url('friends/viewReq') }}" class="alert-link">Please check</a> 
          </strong>. 
         </div> 
        @endif 
       </div> 
       <div class="col-md-8 col-md-offset-2"> 
        {!! Form::open(['url' => 'home','files' =>true]) !!} 
        <div class="panel panel-default"> 
         <div class="panel-heading">Add a new status</div> 

         <div class="panel-body"> 
          <div class="form-group"> 
           <label>Write a new status</label> 
           <textarea class="form-control" name="status-text" id="status-text"></textarea> 

          </div> 
         </div> 
         <div class="panel-footer clearfix"> 
          <div class="row"> 
           <div class="col-md-3"> 

            <label for="file upload" class="custom-file-upload"> 

             <i class="fa fa-image"></i> or <i class="fa fa-video-camera"></i> 

            </label> 
            <input id="file-upload" name="status_image_upload" type="file"/> 
           </div> 
           <div class="col-md-6="> 

            <button class="btn btn-info pull-right btn-sm"><i class="fa fa-plus"></i>Add status 
            </button> 

           </div> 

          </div> 

         </div> 
        </div> 
        {!! Form::close() !!} 

        @foreach($top_15_posts as $status) 
         {!! 
         view('layouts.app-internal.user-status-layout',[ 
         'status' => $status, 
         'user' => \App\Eloquent\User::find($status->user_id), 
         'comments' => \App\Eloquent\StatusComments::where('status_id',$status->id)->orderBy('id','DESC')->get(), 
          'comment_count' => \App\Eloquent\StatusComments::where('status_id',$status->id)->count(), 
          'like_count' => \App\Eloquent\StatusLikes::where('status_id',$status->id)->count() 

         ]) 
         !!} 
        @endforeach 

       </div> 
      </div> 
     </div> 
    @endsection

Screenshot of what I get back on the page

個Screenshot of what it is supposed look like

來源

2017-07-18 Lucy

使用4.7這是fa fa圖標的最新版本...您正嘗試使用的圖標可以是新添加的.. – anwar

您需要在您的代碼中添加fontawesome –

如果你想顯示的圖標使用該類你需要使用inclue fontawesome。在代碼中添加此

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

來源

2017-07-18 12:41:03

謝謝:)，工作正常，我會現在就給你的答案 – Lucy

不客氣，問問你是否發現另一個問題：D –

使用字體真棒CSS在文件中包含

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

您使用fa類，所以你需要有字體真棒CSS庫

來源

2017-07-18 12:39:30 Hari

FA-相機或發視頻攝像頭需要字體真棒擴展.. 可以字體真棒庫添加到您的文件。複製此鏈接..

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

或者，你可以看到使用字體真棒在http://fontawesome.io/get-started/的方式。

來源

2017-07-18 12:48:16

雖然我已經正確引用了引導程序，但並未顯示相機和視頻圖標

回答

相關問題