Search code examples
cssmedia-queries

Font Awesome not displaying on mobile

I created a website and uploaded it now on my server. My problem is that I used font awesome; on local and PC it works but on mobile it does not. I tested on Chrome and Mozilla on HTC 10.

my CSS:

.back_to_top {
    width: 30px;
    height: 30px;
    padding: 20px;
    text-align: center;
    font: normal normal normal 26px/1 FontAwesome;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    -ms-opacity: .5;
    -o-opacity: .5;
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    font-weight: 700;
    color: #fff;
    background-color: #f2735a;
    border-radius: 50px;
    -webkit-text-decoration: none;
    -moz-text-decoration: none;
    -ms-text-decoration: none;
    -o-text-decoration: none;
    text-decoration: none;
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: none
}

.back_to_top:after {
    content: '\f062';
    vertical-align: middle
}

Here's the arrow http://fontawesome.io/icon/arrow-up/

My page you can try: http://zakopane-rzadkosz.pl

Solution

  • If you check your console, you'll see the following error referring to your CSS files.

    Failed to load resource: the server responded with a status of 404 (Not Found)

    Make sure the files are uploaded and the <link> tag is pointing to the correct file path.