css 需要在没有字体 css 的情况下工作答案

【问题标题】：css need to work without the font csscss 需要在没有字体 css 的情况下工作
【发布时间】：2016-02-13 10:07:18
【问题描述】：

我有一个代码笔，其中反应功能可以正常工作...
但是当我用相同的代码转移到另一个 codepen 时它不起作用...由于下面的链接标签...

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

工作代码

不工作的代码 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;
  }

【问题讨论】：

亲爱的你需要更清楚:)
@kanudo 如果你在 head 部分的 html 的设置选项卡中看到它......你就会知道......我尽力解释了
Font-awesome 为您提供:before 中的搜索图标，当您删除 font-awesome 时，该图标不存在。 :before 为您的span 提供了一些尺寸，因此您可以单击它。所以要么提供一个:before，要么在你的跨度中添加一些width和height。

标签： html css reactjs

【解决方案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;

【讨论】：