虽然我已经正确引用了引导程序，但并未显示相机和视频图标

我花了几个小时试图找出我的代码有什么问题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

虽然我已经正确引用了引导程序，但并未显示相机和视频图标

回答

相关问题