bootstrap中如何使用字体图标-创新互联

本篇文章为大家展示了bootstrap中如何使用字体图标,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

10年积累的网站建设、成都网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计制作后付款的网站建设流程,更有富蕴免费网站建设让你可以放心的选择与我们合作。

什么是字体图标

字体图标是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。

为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接。

获取字体图标

在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件:

●glyphicons-halflings-regular.eot

●glyphicons-halflings-regular.svg

●glyphicons-halflings-regular.ttf

●glyphicons-halflings-regular.woff

相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上。

用法

如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

下面的实例演示了如何使用字体图标:

                                                                

     User     User     User

结果如下所示:

带有字体图标的导航栏

                                        Toggle navigation                                                                        Project name        
                                                                                Home                                
  •                                             Shop                
  •                 
  •                                             Support                
  •                     
                
        

    定制字体图标

    我们已经看到如何使用字体图标,接下来我们看看如何定制字体图标。

    我们将以上面的实例开始,并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。

    下面是开始的代码:

       User

    效果如下所示:

    定制字体尺寸

    通过增加或减少图标的字体尺寸,您可以让图标看起来更大或更小

       User

    定制字体颜色

       User

    应用文本阴影

       User

    上述内容就是bootstrap中如何使用字体图标,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


    当前标题:bootstrap中如何使用字体图标-创新互联
    网页地址:http://myzitong.com/article/dgojes.html