Questions tagged «font-awesome»

Font Awesome是一种标志性的独立矢量字体,最初开发用于Twitter Bootstrap前端框架。



15
如何在React的render()中包括一个Font Awesome图标
每当我尝试在React的中使用Font Awesome图标时render(),尽管它可以在普通HTML中运行,但它不会显示在结果网页上。 render: function() { return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>; } 这是一个实时示例:http : //jsfiddle.net/pLWS3/ 哪里错了?

29
真棒字体未显示图标
我正在使用Font Awesome,并且不希望通过HTTP添加CSS。我下载了Font Awesome并将其包含在我的代码中,但是Font Awesome显示的是带边框的方框而不是图标。这是我的代码: <html> <head> <link rel="stylesheet" href="../css/font-awesome.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> </head> <body> <div style="font-size: 44px;"> <i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x </div> </body> </html> 我想知道如何显示图标而不是带边框的方形框。
99 html  css  font-awesome 

4
如何确定每个字形的宽度相同?
我注意到,即使使用相同的字体大小,也没有标准的宽度。如何在项目列表前使用这些字词,以免出现锯齿状? 问题截图: 这是代码: <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>

6
静态旋转超赞字体的图标
我想将字体超赞的图标静态旋转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呢。这是否意味着它们实际上不能任意旋转?

8
如何在输入字段中添加“真棒字体”图标?
如何使用“真棒字体”中包含的搜索图标进行输入?我的网站上有一个搜索功能(基于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" …
89 html  css  font-awesome 

8
从Font Awesome中提取SVG
我想从Font Awesome字形中获取SVG路径数据,以便可以在HTML中直接将它们用作SVG。我以为这就像从fontawesome-webfont.svg复制粘贴路径数据一样容易,但是当我在HTML中使用它们时,符号都完全颠倒了。有人知道为什么吗? (请参阅小提琴) 字体真棒SVG: <glyph unicode="" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 …
89 html  svg  font-awesome 

7
仅针对使用过的类优化Font Awesome
我正在使用Font Awesome Sass文件https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass使其成为_font-awesome.sass,因此可以@import在我的Sass项目中使用。我还使用http://middlemanapp.com/将Sass转换为Css。问题: 有没有办法将仅使用过的图标类带入转换后的.css中?因为现在它包含了_font-awesome.sass中的所有类 BONUS:是否可以用旧的图标类以某种方式重新编译字体,以使其在生产时更小? 如果我能在上面的#1上找到一些提示,那就足够了。 谢谢。
86 css  sass  font-awesome 

9
如何使用相对路径在Webpack中使用SCSS(SASS)加载超棒的字体?
我的node_modules文件夹中的字体很棒,因此我尝试将其导入到主.scss文件中,如下所示: @import "../../node_modules/font-awesome/scss/font-awesome.scss"; 但是Webpack捆绑编译失败,告诉我 Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot 因为font-awesome.scss文件引用了相对路径'../fonts/'。 如何告诉scss \ webpack @import另一个文件,并将该文件的文件夹用作主文件夹,以便其相对路径按预期工作?

5
i标签的Alt或title属性
我使用超赞的字体并像这样显示其字体: <i class="icon-lock"></i> 这将显示一个漂亮的小锁符号。为了让用户知道确切的含义,我尝试添加诸如title和alt之类的属性,但无济于事。 我可以为<i>执行与alt图像和链接标题相同的任务的标记使用任何属性吗?


8
如何知道字体(@ font-face)是否已经加载?
我使用的是Font-Awesome,但未加载字体文件时,图标显示为。 因此,我希望这些图标display:none在未加载文件时具有。 @font-face { font-family: "FontAwesome"; src: url('../font/fontawesome-webfont.eot'); src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; } 我怎么知道这些文件已经加载,我终于可以显示图标了? 编辑: 我不是在说页面何时被加载(onload),因为字体可以在整个页面之前被加载。

10
字体上的超赞错误404
我不知道发生了什么,但是在浏览器控制台中我可以看到3个与font-awesome相关的错误 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff?v=4.3.0 GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.ttf?v=4.3.0 我知道这很荒谬,我无法自己弄清楚,但一切似乎都很好,在我的index.html中,我有类似的内容 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" /> 这就是我与字体超赞相关的全部内容,我已经检查了路径,对此我没有错。 你们所有人都在发生这种情况吗? 更新 这是NGINX的部分,我在标题中加载了一些内容 add_header Content-Security-Policy "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://fonts.gstatic.com https://themes.googleusercontent.com https://assets.zendesk.com; font-src 'self' https://themes.googleusercontent.com https://fonts.gstatic.com;";

8
在CSs之前使用FontAwesome或Glyphicons:
content:使用:before伪元素时,是否可以将HTML嵌入到CSS元素中? 我想在这样的用例中使用Font Awesome(或Glyphicon): h1:before { content: "X"; padding-right: 10px; padding-left: 10px; color: @orangeLight; } 哪里X是这样的<i class="icon-cut"></i>。 我当然可以在HTML中手动执行此操作,但我确实想:before在这种情况下使用。 同样,有什么方法可以<i>用作列表项目符号吗?这可行,但是对于多行项目符号项目却无法正常工作: <ul class="icons"> <li><i class="icon-ok"></i> Lists</li> <li><i class="icon-ok"></i> Buttons</li> <li><i class="icon-ok"></i> Button groups</li> <li><i class="icon-ok"></i> Navigation</li> <li><i class="icon-ok"></i> Prepended form inputs</li> </ul>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.