html - css 需要在没有字体 css 的情况下工作

Question

• 我有一个 codepen，其中的 React 功能运行良好...
• 但是当我使用相同的代码转移到另一个 codepen 时它不起作用...由于下面的链接标记...

• 你们能告诉我如何使当前代码在没有此链接标记的情况下工作......使用普通的 css

• 在下面提供我的代码..

工作代码

http://codepen.io/anon/pen/qbgxdb

无效代码<强> http://codepen.io/anon/pen/YwBeWZ

.fa-search {
    color: #2980b9;
    font-size: 30px;
    position: absolute;
    top: 7px;
    left: 8px;
    cursor: pointer;
  }
  .fa-times-circle {
    opacity: 0;
    color: #d9d9d9;
    font-size: 20px;
    position: absolute;
    top: 12px;
    right: 8px;
    transition: opacity 0.4s ease-out;
    cursor: pointer;
  }

  .search-input {
    position: absolute;
    cursor: default;
    left: 45px;
    top: 6px;
    width: 0;
    padding: 5px;
    border: none;
    outline: none;
    font-size: 18px;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 0);
    transition: width 0.4s ease-out;
  }

Answer 1

只需改进 css，即使没有很棒的字体链接也能正常工作。

.fa-search {
color: #2980b9;
font-size: 30px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
/* ------------------------- just add the css below */
height: 100%;
width: 100%;
border-radius: 50%;
}

这是工作 PEN

您还可以将精确的像素值指定为

height: 46px;
width:  46px;

因为你的外部 div 的高度为 50px，宽度为 50px，边框为 2px，因此高度为 46px，宽度为 46px，因为它继承了 box-sizing: border-box;