Question

我花了好几个小时试图找出我的代码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

Answer 1

fa-camera或fa-video-camera需要字体很棒的扩展.. 您可以将font awesome库添加到您的文件中。复制此链接..

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

或者你可以在http://fontawesome.io/get-started/看到使用font-awesome的方法。

Answer 2

在文件中使用字体awesome css include

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

您正在使用类fa，因此您需要拥有字体真棒css库

Answer 3

如果您想要显示图标，请使用该类fontawesome。在您的代码中添加它

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

即使我正确引用了引导程序，相机和视频图标也不会显示

3 个答案: