Question

我想在用于网站内容搜索的输入框内添加一个图标（放大镜）。类似的东西：http://webnus2.net/florida/（顶级菜单）我不需要动画逻辑：这是我知道怎么做的。

当然想使用FoundIcons，我正在使用Foundation 5.

我想我可以通过在placeholder属性中放入正确的字符来使用一些技巧，但我更喜欢简单地使用CSS。

任何人都有一些提示吗？

Answer 1

您可以使用占位符并相应地设置样式以显示您的FoundIcon。

<input type="text" class="search-text-box" id="search-box" style="width: 140px; color: rgb(68, 68, 68);" placeholder="&#61486;">

并设计风格：

.search-text-box {
    font-family: 'GeneralFoundicons'; /* This is for the placeholder */
    background-color: #f3f3f3;
    background-repeat: no-repeat;
    border: 0 none;
    border-radius: 18px;
    box-shadow: none;
    color: transparent;
    cursor: text;
    font-size: 13px;
    color: #444;
    height: 18px;
    line-height: 18px;
    padding: 7px 5px 8px 8px;
    transition: all 0.3s ease-in-out 0s;
    width: 1px;        
}

使用字体系列GeneralFoundicons显示FoundIcon广告占位符非常重要，要获取正确的十进制值并在占位符属性中设置它，您必须检查css文件并将HEX值转换为DEC，例如：

（HEXvalue = \ f02e）转换为（Decimal = 61486）

或者您可以使用包装元素来显示您的图标：

<i class="general foundicon-search"><input type="text" class="search-text-box" id="search-box2" style="width: 140px; color: rgb(68, 68, 68);"/></i>

演示：http://jsfiddle.net/IrvinDominin/ksh69/

Answer 2

在你的css课程中：

background-image: url("Your image path");
background-position: "x" "unit" "y" "unit";
background-repeat: "sequence";

示例：

background-image: url(../images/search-icon.png);
background-position: 0px 0px;
background-repeat: no-repeat

在输入文本元素中添加Web字体（FoundIcons）

2 个答案: