Question

对于我想使用fontawesome图标的网站。例如，我需要使用心脏图标：

工作的：

<i class="fa fa-heart" aria-hidden="true"></i>

图标可用作填充版本或仅提供大纲，我只需要＆＃34;大纲＆＃34;图标的版本。要获得大纲版本，只需添加＆＃34; -o＆＃34;即可更改相应的CSS类。像这样：

无效：

<i class="fa fa-heart-o" aria-hidden="true"></i>

但＆＃34; -o＆＃34;版本只是不显示。在fontawesome网站上宣布了很多图标，可以添加＆＃34; -o＆＃34;仅显示轮廓。但是当我尝试时它们都没有显示出来。正常的图标有效。 我也搜索过＆＃34; -o＆＃34;在所有下载的CSS文件中声明但没有找到任何内容！就像他们没有实现它一样..

我无法找到问题所在。对我来说就像是他们＆＃34;忘了＆＃34;实施＆＃34; -o＆＃34;最新的Fontawesome 5.0.4文件中的版本。

PS：我通过下载CSS文件＆＃34; fontawesome-all.min.css＆＃34;将图标添加到我的项目中。使用this link搜索图标，例如＆＃34;心脏＆＃34;

请求，我的整个代码：

<!DOCTYPE html>
<head>
    <link href="http://127.0.0.1:8000/css/fontawesome-all.min.css" rel="stylesheet">
    <link href="http://127.0.0.1:8000/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
        <div class="col-md-12">

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Some Title</h6>

                    <!-- Stats -->
                    <p class="card-text font-weight-light">
                        <span class="mr-4"><i class="fa fa-comment" aria-hidden="true"></i>0</span>
                        <span class="mr-4"><i class="fa fa-heart" aria-hidden="true"></i>0</span>
                        <span><i class="fa fa-star" aria-hidden="true"></i>0</span>
                    </p>
                </div>
            </div>   
        </div>        
        </div>
    </div>

    <!-- Scripts -->
    <script src="http://127.0.0.1:8000/js/jquery-3.2.1.min.js"></script>
    <script src="http://127.0.0.1:8000/js/bootstrap.min.js"></script>

</body>
</html>

Answer 1

TL;DR

使用： <div id="floating-panel"></div> <div id="map"></div> <script> function initMap() { var map = new google.maps.Map ( document.getElementById('map'), { zoom: 8, center: {lat: -34.397, lng: 150.644} } ); var geocoder = new google.maps.Geocoder(); document.getElementById('submit').addEventListener ( 'click', function() { geocodeAddress(geocoder, map); } ); } function geocodeAddress(geocoder, resultsMap) { var address = document.getElementById('address').value; geocoder.geocode({'address': address}, function(results, status) { if (status === 'OK') { resultsMap.setCenter(results[0].geometry.location); var marker = new google.maps.Marker ({ map: resultsMap, position: results[0].geometry.location }); } else { alert('Geocode was not successful for the following reason: + status); } }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCH2nCSs1XR37Q6HdyUpZZfgP5_uMsi-vA&callback=initMap"> </script>

<强>解释

自Font Awesome Version 5以来，几件事发生了变化。

网站：

旧网站http://fontawesome.io/适用于版本4.X

https://fontawesome.com

第5版
在此处搜索图标：https://fontawesome.com/icons

变化（并非全部）：

<i class="far fa-heart" aria-hidden></i>已更改为fa（字体很棒常规）
所有far图标都已整合到-o

以下是upgrade guide from v4 to v5

Answer 2

这是你喜欢的吗？

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<i class="fa fa-heart-o" aria-hidden="true"></i>

＆＃13;

Answer 3

我猜您使用的字体版本真棒5，请在常规：远亲，纯色之间指定图标的样式： fas fa-heart 和 light ： fal fa-heart 。如果您使用 fa fa-heart ，则默认情况下将使用固定版本。

将鼠标悬停在此链接上可以查看各种图标样式：https://fontawesome.com/icons?d=gallery&q=heart

在v5中，没有 fa fa-heart-o 。适用于v4。否则，请使用v4的CDN。

Answer 4

对于常规心脏（轮廓）使用class =“ far fa-heart”，对于坚固心脏，请使用class =“ fas fa-heart”

无法使用任何带有＆＃34; -o＆＃34;的Fontawesome图标结尾

4 个答案: