字体真棒图标

时间:2013-12-29 13:59:58

标签: html5 fonts icons glyph

我已经看到了一些关于此的帖子,希望这对于大多数人来说都是一个快速的解决方案。我已经购买了一个我喜欢的模板,我已经在它上面制作了很多mod,我对web开发工具很新,对于字体非常棒。我想换掉我自己的字体真棒图标 - 我看到有很多方法/非常复杂的方法可以添加到字体真棒库中,但这已经超出了我的知识限制。

这是html

<!-- Container -->
    <div class="container">

<!-- Section Title -->
<div class="section-title">
    <h1>We love technology</h1>
    <span class="border"></span>
    <p>We tackle business problems with intelligence. We use cutting-edge tech and cutting-edge thinking to bring brands to life online and direct consumer behaviour.</p>
</div>              
        <!--/Section Title -->


<ul class="technology">

    <li class="element_fade_in">
        <i class="icon-comments"></i>
    <h5>Bluetooth</h5>
    <p>We tackle business problems with intelligence. We use cutting-edge tech and cutting-edge thinking to bring.</p>                
    </li>

    <li class="element_fade_in">
        <i class="icon-wrench"></i>
    <h5>Airdrop</h5>
    <p>We tackle business problems with intelligence. We use cutting-edge tech and cutting-edge thinking to bring.</p>                
    </li>

    <li class="element_fade_in">
        <i class="icon-rocket"></i>
    <h5>NFC Enabled</h5>
    <p>We tackle business problems with intelligence. We use cutting-edge tech and cutting-edge thinking to bring.</p>                
    </li>

    <li class="element_fade_in">
        <i class="icon-bar-chart"></i>
    <h5>Quick Response</h5>
    <p>We tackle business problems with intelligence. We use cutting-edge tech and cutting-edge thinking to bring.</p>                
    </li>

</ul>


</div>
<!--/Container -->

</section>

我想添加我自己的图像,因为它们不存在于字体真棒目录中 - 以假设我将图像放在图像文件夹中,即路径/img/blutooth.png

有人可以告诉我该怎么做吗?现在感谢先生。标记

2 个答案:

答案 0 :(得分:0)

无论如何都没有理由使用FontAwesome。按照你说的做,即创建你想用作图标的图像(例如images / icon-new.png),然后将它们插入像这样的普通图像......

<li class="element_fade_in">
    <img src="images/icon-new.png class="icon-wrench">
<h5>Airdrop</h5>
<p>We tackle business problems with intelligence. We use cutting-edge tech and cutting-edge thinking to bring.</p>                
</li>

然后使用CSS类(给出示例的icon-wrench),用于正确定位并更改大小。

答案 1 :(得分:0)

有一种方法可以制作自定义图标,但每年至少49美元。 Font Awesome有一个名为Fort Awesome的东西可以让你做/做:

<强> 1。上传徽标

<强> 2。自定义图标

第3。图标套件

<强> 4。字体资产套件

<强> 5。套件/印刷字体

<强> 6。图标库

我认为它适用于Bootstrap,因为Font Awesome可以。我没有它,但这听起来很酷。我认为这可能是你问题的解决方案,因为我猜它不难用。