2016-01-08 2 views
2

Я новичок в загрузчикешрифта удивительный не работает с начальной загрузкой

я сделал новую страницу, и это моя страница (нет контента на нем!)

<!DOCTYPE html> 
<html lang = "fa"> 

    <head> 
    <meta charset = "utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <title>TEST</title> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <link rel="stylesheet" href="style/index.css"> 

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



    </head> 

    <body> 
    <header> 
    <div class="container"> 
     <a class="fa fa-ban">Test ban</a> 
    </div> 
    </header> 






     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

     <!-- Include all compiled plugins (below), or include individual files as needed --> 
     <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 

    </body> 
</html> 

Как вы видите, у меня есть элемент <a>, и он имеет класс font-awesome, я имею в виду fa fa-ban, но он не работает!

В чем проблема?

+0

проверить консоль ошибок, поместить тег сценария вне тела –

+0

@UbiquitousDevelopers Есть несколько предупреждений, но я не знаю, почему, Я просто сделал то, что сказал bootstrap, я добавил некоторые ссылки на его файлы css и ... но я не знаю, в чем проблема –

+0

, она работает во мне. просто обновите свою страницу с помощью CTRL + F5 –

ответ

0

Теперь я нашел ответ сам.

Как вы видите, есть ссылка на index.css, у меня было немного плохой код в моем index.css что:

*, *:after, *:before{ 
    box-sizing: inherit; 
} 

*, * *,{ 
    /* Set your content font stack here: */ 
    font-family: 'arad', Times, "Times New Roman", serif !important; 
} 

Когда я удалил, что он правильно работает сейчас

+0

Вы уверены, что это проблема? Селектор css имеет ошибку, поэтому все правило должно быть проигнорировано браузерами. –

+0

@MrLister Да, это сработало для меня, когда я удалил эти строки. Каковы мои проблемы с селектором css? Я не вижу –

+0

Нижняя часть начинается с '*, * *, {', что неверно. Последней запятой не должно быть. Так как в селекторе есть ошибка, браузер игнорирует все правила стиля. Смотрите [эту скрипку] (https://jsfiddle.net/MrLister/1t88oku5/), где все должно быть красным, но это не так. (Если вы удалите последнюю запятую, это будет работать). –

1

использование попытка <i> тег внутри <a>

<a href="#"><i class="fa fa-ban"></i>Test ban</a> 
0

Это работает для меня: https://jsfiddle.net/fka3gp1b/

Я бы, возможно, переформатировать код немного, так что удивительный значок шрифта является потомком элемента анкера следующим :

<a href="#"><i class="fa fa-ban"></i>Test ban</a> 

Аналогичным образом использование тега span работает так же хорошо l:

<a href="#"><span class="fa fa-ban"></span>Test ban</a> 
1

Вы не можете непосредственно использовать классы внутри <a> тега я подозреваю.

Так что

<a class="fa fa-ban">Test ban</a> 

должны быть заменены

<a href="#"><i class="fa fa-ban"></i>Test ban</a> 
Смежные вопросы