Font awesome 不适用于 bootstrap
Font awesome is not working with bootstrap
我是新来的bootstrap
我新建了一个页面,这是我的页面(上面没有内容!)
<!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
class,我的意思是 fa fa-ban
,但它不起作用!
问题是什么?
尝试在 <a>
中使用 <i>
标签
<a href="#"><i class="fa fa-ban"></i>Test ban</a>
这对我有用:https://jsfiddle.net/fka3gp1b/
我可能会稍微重新格式化您的代码,使字体真棒图标成为锚元素的子元素,如下所示:
<a href="#"><i class="fa fa-ban"></i>Test ban</a>
同样,使用 span 标签也同样有效:
<a href="#"><span class="fa fa-ban"></span>Test ban</a>
现在我自己找到了答案。
如您所见,有一个 link 到 index.css
,我的 index.css
中有一个小错误代码,即:
*, *:after, *:before{
box-sizing: inherit;
}
*, * *,{
/* Set your content font stack here: */
font-family: 'arad', Times, "Times New Roman", serif !important;
}
当我删除它时,它现在可以正常工作了!
这对我有用:https://jsfiddle.net/smit_patel/teg7kfc4/
使用此标签工作正常。
<a><i class="fa fa-2x fa-ban"></i>Test ban</a>
我怀疑你不能直接使用 <a>
标签内的 类。
所以这个
<a class="fa fa-ban">Test ban</a>
必须替换为
<a href="#"><i class="fa fa-ban"></i>Test ban</a>
我是新来的bootstrap
我新建了一个页面,这是我的页面(上面没有内容!)
<!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
class,我的意思是 fa fa-ban
,但它不起作用!
问题是什么?
尝试在 <a>
<i>
标签
<a href="#"><i class="fa fa-ban"></i>Test ban</a>
这对我有用:https://jsfiddle.net/fka3gp1b/
我可能会稍微重新格式化您的代码,使字体真棒图标成为锚元素的子元素,如下所示:
<a href="#"><i class="fa fa-ban"></i>Test ban</a>
同样,使用 span 标签也同样有效:
<a href="#"><span class="fa fa-ban"></span>Test ban</a>
现在我自己找到了答案。
如您所见,有一个 link 到 index.css
,我的 index.css
中有一个小错误代码,即:
*, *:after, *:before{
box-sizing: inherit;
}
*, * *,{
/* Set your content font stack here: */
font-family: 'arad', Times, "Times New Roman", serif !important;
}
当我删除它时,它现在可以正常工作了!
这对我有用:https://jsfiddle.net/smit_patel/teg7kfc4/
使用此标签工作正常。
<a><i class="fa fa-2x fa-ban"></i>Test ban</a>
我怀疑你不能直接使用 <a>
标签内的 类。
所以这个
<a class="fa fa-ban">Test ban</a>
必须替换为
<a href="#"><i class="fa fa-ban"></i>Test ban</a>