标签: font-awesome

我有一个问题是让图标直接出现在ul中的列表项后使用字体awesome和:after.

具有活动类的li应该在其后面有图标但是在关闭列表项之前添加另一个ul时,它会将图标放在整个辅助列表之后.

<div id="thirdLevMenu">
<ul>
<li class="active">Integrated Coastal Watershed Management Plans
<ul>
<li><a href="http://design-irwmp3.migcom.com/app_pages/view/7931">Russian River Integrated Coastal Watershed Management Plan</a></li>
<li><a href="http://design-irwmp3.migcom.com/app_pages/edit/http:/www.goldridgercd.com/watersheds/salmoncreekplan.html" target="_blank">Salmon Creek Coastal Watershed Management Plan</a></li>
<li><a href="http://design-irwmp3.migcom.com/app_pages/edit/http:/www.mattole.org/plan" target="_blank">Mattole Coastal Watershed Management Plan</a></li>
<li><a href="http://design-irwmp3.migcom.com/app_pages/edit/http:/www.trinidad.ca.gov/documents-library/category/30-icwmp.html" target="_blank">Trinidad-Westhaven Coastal Watershed Management Plan</a></li>
</ul>
</li>
</ul>
</div>

我不能为我的生活弄清楚我做错了什么.

这是我的jsfiddle

提前致谢!!

我有一个非常类似的问题:"Jquery'点击'当图标在按钮上时没有触发"但是该帖子的分辨率并没有为我提供解决方案,所以我认为可能会发生一些不同的事情.

关键问题是我有一个带有图标的按钮.当我点击按钮(例如文本)时,事件目标是按钮元素; 但是当我点击图标时,事件目标就是图标对象.不幸的是,这非常烦人,因为我将数据值存储在我想要访问的按钮上.

这是HTML:

<button class="btn btn-success vote-button" id="btnUpVote" type="button" data-vote="1">
    <i class="fa fa-thumbs-up"></i>
    Up Vote!
</button>

<button class="btn btn-danger vote-button" id="btnDownVote" type="button" data-vote="-1">
    <i class="fa fa-thumbs-down"></i>
    Down Vote!
</button>

这是Javascript:

function sendVote(event) {
    var $btn = $(event.target);
    console.log(parseInt($btn.data('vote'));
    console.log($btn.prop('tagName'));
}

$('body').on('click', 'button.vote-button', sendVote);

单击文本("Up Vote!"或"Down Vote!")会产生以下控制台输出:

1
BUTTON
-1 
BUTTON

单击图标(等)将导致以下控制台输出:

NaN
I
NaN
I

即使我已经使用选择器"button.vote-button"在元素上注册了句柄.有谁知道为什么会这样？我不想必须为图标提供数据属性.

我试图将我的FontAwesome图标集中在我的Twitter Bootstrap代码中.

这是我的HTML:

<div id="frontpage-content" class="content">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <span>
                    <i class="fa fa-camera-retro fa-5x"></i>
                </span>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, inventore, ipsa dolorum laborum sit alias iusto nam quibusdam ad distinctio rerum expedita autem itaque delectus iste mollitia perferendis sint libero accusamus
                        in. Enim, natus necessitatibus pariatur optio explicabo consequuntur quod!</p>
            </div>
            <div class="col-lg-4">
                <i class="fa fa-camera-retro fa-5x"></i>
                <p>Ut, aliquid, aperiam, veniam modi voluptates maiores nesciunt libero fugiat illum recusandae cum similique et …

尝试使用我的按钮的字体真棒图标,但我不能让它显示在submit_tag中

 <%= submit_tag icon("search"), class: "btn-primary", style:"width:40px;" %>

输出:

 <input class="btn-primary" name="commit" style="width:40px;" type="submit" value="&lt;i class='icon-search' style='font-size:1em' &gt;&lt;/i&gt;">

帮手:

def icon(name, size=1)
  #icon("camera-retro")
  #<i class="icon-camera-retro"></i> 

  html = "<i class='icon-#{name}' "
  html += "style='font-size:#{size}em' "
  html += "></i>"
  html.html_safe
end

当我删除帮助器的html.html_safe行时,我得到同样的东西.它像html_safe一样无效.我也尝试过html = raw(html)也没有效果.

我试图从选择列表中的选项中嵌入一个图标.使用font-awesome图标,不显示任何图标.

<select>
    <option><i class="icon-camera-retro"></i> Doesn't work in option!</option>
</select>

我可以使用font-awesome来实现我需要的东西吗？或者我是否必须使用font-awesome废弃并为每个选项执行手动CSS背景？

JSFiddle:http://jsfiddle.net/mmXh2/1/

我想要一种方法来扩展带有Font-Awesome图标的默认jQuery UI图标.如果可能的话,将jQuery图标保留为后备,因为Font-Awesome没有完整的覆盖范围.

jQuery UI示例:

$("#muteAll").button({
    text: false, 
    icons: { 
        primary: "ui-icon-volume-on" 
    }
});

Font-Awesome替换/扩展示例:

$("#muteAll").button({
    text: false, 
    icons: { 
        primary: "icon-volume-up" 
    }
});

我最接近的是:

.ui-icon[class*=" icon-"] {
    background: none repeat scroll 0 0 transparent;
    left: 0;
    margin-left: 1px; 
    text-indent: 0;
}

我试图让我的引导站点中的glyphicons在悬停时旋转(除了改变颜色).

这是我的尝试:http://jsfiddle.net/young_greedo17/88g5P/

...使用此代码:

<div class="widgetbox">
    <br><br>
    <div class="icon-calendar icon-large"></div>
    <h5>Add an event</h5>
</div>

......这是CSS:

.widgetbox {
    width: 250px;
    height: 250px;
    background-color: black;
    color: white;
    text-align: center;
}
.widgetbox [class*="icon-"] {
    -webkit-transition-duration: 1.0s;
    -moz-transition-duration: 1.0s;
    -o-transition-duration: 1.0s;
    transition-duration: 1.0s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}
.widgetbox:hover [class*="icon-"] {
    color: #24a159 !important;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}

这是我想要在悬停时发生的一个例子(参见四个小部件框ATF):http://themeforest.net/item/flatnica-ultimate-flat-template/full_screen_preview/5343665

显然,颜色会发生变化,但即使这样也不会根据我为CSS过渡设置的参数而改变.

谢谢!

我想删除Bootstrap 3 Glyphicons以支持Font Awesome.由于Font Awesome已包含大部分Glyphicons,因此不希望包含它们并避免重复和兼容性问题.

当我进行自定义bootstrap下载并取消选中glyphicon组件时,我仍然会在css文件中看到一些glyphicon引用.http://getbootstrap.com/customize/

如何完全禁用这些图标？

谢谢

我可以在FontAwesome GitHub上看到新版本4.2已经发布

我使用bower 1.3.9(最新),我当前的字体版本很棒4.1

当我输入bower update fontawesome或bower update fontawesome#4.2我无法获得4.2.

有没有办法用凉亭更新字体真棒到4.2？

进入fontawesome bower组件目录的bower.json,我可以看到这个git url git://github.com/FortAwesome/Font-Awesome.git与https://github.com/FortAwesome/Font-Awesome.git略有相同,其中有最新版本可用.

任何帮助,将不胜感激

我目前正在处理一个无序列表,其中包含带有标语的列表项.我有一个关于一个列表项的问题,这个问题很长,足以占用两行(见图)

我想要它,以便第二行与第一行对齐.这是我正在使用的HTML代码.我使用fontAwesome作为检查图像.

ul {
  width: 300px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

我已经尝试 在"2"和"行"之间输入多个,但这对我来说似乎是一个非常糟糕的做法.我希望有人可以帮我解决这个问题.