程序设计 font-awesome

11

我有一些看起来像这样的CSS： #content h2 { background: url(../images/tContent.jpg) no-repeat 0 6px; } 我想用Font Awesome中的图标替换图像。无论如何，我看不到将CSS中的图标用作背景图片。假设在我的CSS之前加载了Font Awesome样式表/字体，是否可以这样做？

304 css font-awesome

9

使用Font Awesome图标作为CSS内容

我想使用Font Awesome图标作为CSS内容，即 a:before { content: "<i class='fa...'>...</i>"; } 我知道我无法在中使用HTML代码content，所以只剩下图像了吗？

278 html css font-awesome

17

我可以更改Font Awesome图标颜色的颜色吗？

<a>由于某种原因，我必须将图标包装在标签中。有什么可能的方法可以将超棒字体图标的颜色更改为黑色？还是只要包裹在<a>标签中就不可能吗？真棒字体应该是字体而不是图像，对不对？ <a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>

264 html css font-awesome

14

如何使用大字体真棒图标使文本垂直居中？

可以说我有一个带有字体真棒图标和一些文本的引导按钮： <div> <i class='icon icon-2x icon-camera'></i> hello world </div> 如何使文字垂直居中？现在，文本与图标的底部边缘对齐：http : //jsfiddle.net/V7DLm/1/ 编辑：我有一个可能的解决方案：http : //jsfiddle.net/CLdeG/1/，但感觉有点hacky-引入了额外的p标签，使用了left-left和display：table。也许有人可以建议一种更简单的方法。

231 html css font-awesome

30

字体太棒了，图标显示为正方形

因此，我正在尝试制作营销页面的原型，并使用Bootstrap和新的Font Awesome文件。问题是，当我尝试使用图标时，页面上呈现的所有内容都是一个大方块。这是我将文件包含在头中的方式： <head> <title>Page Title</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-responsive.css"> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/app.css">  </head> 这是我尝试使用图标的示例： <i class="icon-camera-retro"></i> 但是所有这些都呈现在一个大方块中。有人知道会发生什么吗？

224 css html twitter-bootstrap font-awesome

7

字体超赞，输入类型为“提交”

在font-awesome中，似乎没有输入类型'submit'的类。是否可以使用font-awesome中的某个类进行按钮输入？我已经在应用程序中向所有按钮（实际上与twitter-bootstrap中的'btn'类链接）添加了图标，但是无法在“输入类型提交”上添加图标。或者，如何使用此代码： input#image-button{ background: #ccc url('icon.png') no-repeat top left; padding-left: 16px; height: 16px; } 的HTML： <input type="submit" id="image-button">Text</input> （我从HTML中获取：如何制作带有文本+图片的提交按钮？）字体真棒？

205 twitter-bootstrap twitter-bootstrap-rails font-awesome

7

处于加载状态时如何在按钮上添加微调图标？

Twitter Bootstrap的按钮具有良好的Loading...状态。事实是，它仅显示一条消息，例如Loading...通过data-loading-text属性传递的消息，如下所示： <button type="button" class="btn btn-primary start" id="btnStartUploads" data-loading-text="@Localization.Uploading"> <i class="icon-upload icon-large"></i> <span>@Localization.StartUpload</span> </button> 查看Font Awesome，您会看到现在有一个动画微调器图标。在触发这样的Upload操作时，我尝试集成该微调器图标： $("#btnStartUploads").button('loading'); $("#btnStartUploads i").removeAttr('class'); $("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large'); 但这完全没有效果，也就是说，我只看到Uploading...按钮上的文字。按钮处于“加载”状态时是否可以添加图标？看起来Bootstrap只是<i class="icon-upload icon-large"></i>在处于Loading状态时只是删除了按钮内的图标。这是一个简单的演示，展示了我上面描述的行为。如您所见，当它进入“加载”状态时，图标消失了。在该时间间隔后，它会重新出现。

189 button twitter-bootstrap icons loading font-awesome

6

自定义li列表样式，带有超棒的字体图标

我想知道是否有可能利用超赞字体（或任何其他标志性字体）类来创建自定义<li>列表样式类型？我目前正在使用jQuery来做到这一点，即： $("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>"); 但是，当<li>文本在页面上换行时，这不能正确设置样式，因为它认为图标是文本的一部分，而不是实际的项目符号。有小费吗？

156 css html-lists font-awesome

15

如何在本机Android应用程序上使用“ Font Awesome”中的图标和符号

我试图在我的应用程序上使用Font Awesome，我可以使用来集成字体Typeface.createFromAsset()，但是我也想使用该字体提供的图标，但是到目前为止，我还没有做到这一点。这种特殊的字体在Unicode专用区（PUA）中包含图标，用于诸如媒体播放器控件，文件系统访问，箭头等操作。在Android上是否有人使用过包含图标和符号的字体，这有可能吗？

153 android font-awesome

8

将自定义图标添加到超赞的字体

我喜欢Font Awesome图标字体，并且希望将其用于我网站上的大多数图标，但是除了提供的功能外，我还需要一些自定义svg图标。我注意到Font .wev的.svg版本主要由以下<glyph />元素组成： ... <glyph unicode="&#xf0b2;" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24.5 …

138 svg webfonts font-awesome

22

文本输入元素中的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"; } 我在默认字体真棒css中声明了字体，所以我不确定在上面添加字体系列是否正确。 @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'); }

136 html css fonts font-awesome

14

将Font Awesome图标制作成一个圆圈吗？

我在某些项目上使用了真棒字体，但是我想对真棒字体图标做一些事情，我可以很容易地这样调用一个图标： <i class="fa fa-lock"></i> 是否所有图标都始终处于带边框的圆形圆圈中？像这样，我有一张照片：使用 i { background-color: white; border-radius: 50%; border: 1x solid grey; padding: 10px; } 会产生效果，但是问题是图标总是比旁边的文本或元素大，有解决方案吗？

134 css font-awesome

7

使用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。

131 css font-awesome

23

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"><!-- …

123 html css font-awesome

10

如何使用节点模块中的字体超赞图标

我已经使用安装了真棒字体4.0.3图标npm install。如果我需要从节点模块使用它，应该如何在html文件中使用它？如果需要编辑less文件，是否需要在节点模块中进行编辑？

111 css node.js less npm font-awesome

Questions tagged «font-awesome»