标签: font-awesome
文本输入元素内的字体真棒图标
我试图在用户名输入字段中插入用户图标.
我已经尝试过类似问题的解决方案之一,background-image因为Font Awesome是一种字体,因此
知道属性不起作用.
以下是我的方法,我无法显示图标.
.wrapper input[type="text"] {
position: relative;
}
.wrapper input[type="text"]:before {
font-family: 'FontAwesome';
position: absolute;
top: 0px;
left: -5px;
content: "\f007";
}
我在默认字体awesome css中声明了字体,所以我不确定上面添加font-family是否是正确的方法.
@font-face {
font-family: 'FontAwesome';
src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
}
推荐指数
解决办法
查看次数
使用Font Awesome图标作为项目符号点,具有单个列表项元素
我们希望能够使用Font Awesome(http://fortawesome.github.com/Font-Awesome/)图标作为CMS中无序列表的项目符号.
CMS上的文本编辑器仅输出原始HTML,因此无法添加其他元素/类.
这意味着当标记显示如下时显示图标:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
如果Font Awesome需要一个不同的font-family属性,那么我可以看到第一个问题,这需要一个单独的元素.
这可能使用纯CSS吗？或者我是否必须使用类似jQuery的东西将元素追加到每个列表项的开头？
我意识到我们可以使用背景图像的后退,但如果可能的话,使用Font Awesome会很棒.
推荐指数
解决办法
查看次数
在一个圆圈中制作字体真棒图标？
我在一些项目上使用字体awsome但我有一些我想用字体真棒图标做的事情,我可以轻松调用这样的图标
<i class="fa fa-lock"></i>
是否有可能所有图标始终是带有边框的圆形,这样的东西我有一张图片
运用
i
{
background-color: white;
border-radius: 50%;
border: 1x solid grey;
padding:10px;
}
会有效果,但问题是图标总是比txt或元素更大,任何解决方案？
推荐指数
解决办法
查看次数
如何使用node-modules中的font-awesome图标
我已经安装了font-awesome 4.0.3图标npm install.
如果我需要从节点模块中使用它我应该如何在html文件中使用它？
如果我需要编辑less文件,我需要在节点模块中编辑吗？
推荐指数
解决办法
查看次数
FontAwesome图标没有显示.为什么？
最近我一直在开发这个网站,我试图在其中放置一个字体很棒的图标,所以它是可扩展的.
事情是他们没有出现.
看看HTML:
<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
要么
<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
我确实把样式表引用放在头部.
我不知道为什么他们没有露面.
这是参考:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
好的,这是完整的HTML:
<head>
<meta charset="UTF-8">
<title>Retrica</title>
<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="style/normalize.css" rel="stylesheet" type="text/css">
<link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="style/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="top-header">
<div class="container"><!-- Start Container -->
<div class="row"><!-- Start Row -->
<div class="span3"><!-- Start Span3 -->
<div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
</div><!-- End Span3 -->
<div class="span9"><!-- Start Span9 -->
<nav class="main-nav"> …推荐指数
解决办法
查看次数
使用Font Awesome Icon作为Favicon
是否可以使用Font Awesome图标作为favicon图标？你知道,浏览器标签中出现在网站标题旁边的小图标吗？
推荐指数
解决办法
查看次数
在占位符中使用Font Awesome图标
是否可以在占位符中使用Font Awesome Icon？我读了占位符中不允许HTML的地方.有解决方法吗？
placeholder="<i class='icon-search'></i>"
推荐指数
解决办法
查看次数
如何确保每个字形具有相同的宽度？
我注意到即使在相同的字体大小,也没有标准宽度.如何在项目列表前面使用这些内容,以使单词不会出现锯齿状？
问题截图:
这是代码:
<ul id="myTab">
<li class="active"><a href="#home"><i class="icon-tasks"></i> Proposal</a></li>
<li><a href="#video"><i class="icon-film"></i> Videos</a></li>
<li><a href="#asset"><i class="icon-paper-clip"></i> Assets</a></li>
<li><a href="#payment"><i class="icon-credit-card"></i> Payment</a></li>
<li><a href="#history"><i class="icon-calendar empty"></i> History</a></li>
</ul>
推荐指数
解决办法
查看次数
静态旋转字体 - 真棒图标
我想将我的字体真棒图标静态旋转45度.它在网站上说:
要任意旋转和翻转图标,请使用fa-rotate-*和fa-flip-*类.
但是,干嘛
<i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i>
不起作用,而替换fa-rotate-45为fa-rotate-90.这是否意味着他们实际上不能随意旋转？
推荐指数
解决办法
查看次数
如何在输入字段中添加Font Awesome图标？
如何使用Font Awesome中包含的搜索图标进行输入？我的网站上有一个搜索功能(基于PHPmotion),我想用于搜索.
这是代码:
<div id="search-bar">
<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
#ffffff" />
<input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
<div id="searchBoxSuggestions"></div>
</form>
</div>
推荐指数
解决办法
查看次数