有关FontAwsome图标样式的问题（似乎是一个错误！）

问题描述 投票：0回答：1

在下面的代码中，我试图将真棒字体图标放置在文本输入标签内。但是<i>标签的样式不适用。几个小时后，我发现如果删除FontAwesome Javascript CDN，它会按预期运行！我不知道到底出了什么问题。这是FontAwesome中的错误吗？

这是代码段，带有FontAwesome Javascript CDN，

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
	<style type="text/css">

    input[type="text"] {
      width: 50%;
      border: 2px solid #aaa;
      margin: 8px 0;
      outline: none;
      padding: 8px;
      box-sizing: border-box;
    }

    .input-with-icon input[type="text"] {
      padding-left: 40px;
    }

    .input-with-icon {
      position: relative;
    }

    .input-with-icon i {
      position: absolute;
      left: 0;
      top: 8px;
      padding: 9px 8px;
      color: #aaa;
      transition: 0.3s;
    }
	</style>
</head>
<body>

<div class="input-with-icon">
  <input type="text" placeholder="Your name">
  <i class="fa fa-user fa-lg"></i>
</div>

</body>
</html>

现在没有FontAwesome Javascript CDN，

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
	<style type="text/css">

    input[type="text"] {
      width: 50%;
      border: 2px solid #aaa;
      margin: 8px 0;
      outline: none;
      padding: 8px;
      box-sizing: border-box;
    }

    .input-with-icon input[type="text"] {
      padding-left: 40px;
    }

    .input-with-icon {
      position: relative;
    }

    .input-with-icon i {
      position: absolute;
      left: 0;
      top: 8px;
      padding: 9px 8px;
      color: #aaa;
      transition: 0.3s;
    }
	</style>
</head>
<body>

<div class="input-with-icon">
  <input type="text" placeholder="Your name">
  <i class="fa fa-user fa-lg"></i>
</div>

</body>
</html>
javascript html css font-awesome styling
1个回答
0
投票

FontAwesome JavaScript将i元素替换为svg元素。

要设置元素的样式，请更改选择器：.input-with-icon svg { ... }

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
  <style type="text/css">
    input[type="text"] {
      width: 50%;
      border: 2px solid #aaa;
      margin: 8px 0;
      outline: none;
      padding: 8px;
      box-sizing: border-box;
    }
    
    .input-with-icon input[type="text"] {
      padding-left: 40px;
    }
    
    .input-with-icon {
      position: relative;
    }
    
    .input-with-icon svg {
      position: absolute;
      left: 0;
      top: 8px;
      padding: 9px 8px;
      color: #aaa;
      transition: 0.3s;
    }
  </style>
</head>

<body>

  <div class="input-with-icon">
    <input type="text" placeholder="Your name">
    <i class="fa fa-user fa-lg"></i>
  </div>

</body>

</html>
0
投票

CSS目标.input-with-icon .fa-user的更改

。input-with-icon .fa-user {位置：绝对；左：0；顶部：8px；填充：9px 8px;颜色：#aaa;过渡：0.3秒;}

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
	<style type="text/css">

    input[type="text"] {
      width: 50%;
      border: 2px solid #aaa;
      margin: 8px 0;
      outline: none;
      padding: 8px;
      box-sizing: border-box;
    }

    .input-with-icon input[type="text"] {
      padding-left: 40px;
    }

    .input-with-icon {
      position: relative;
    }

    .input-with-icon .fa-user {
      position: absolute;
      left: 0;
      top: 8px;
      padding: 9px 8px;
      color: #aaa;
      transition: 0.3s;
    }
	</style>
</head>
<body>

<div class="input-with-icon">
  <input type="text" placeholder="Your name">
  <i class="fa fa-user fa-lg"></i>
</div>

</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.