首页前端开发其他前端知识Bootstrap中引用字体图标有几种方法,代码是什么

Bootstrap中引用字体图标有几种方法,代码是什么

时间2024-03-27 04:34:04发布访客分类其他前端知识浏览867
导读:在这篇文章中,我们将学习“Bootstrap中引用字体图标有几种方法,代码是什么”的相关知识,下文有详细的介绍及示例,小编觉得挺不错的,有需要的朋友可以借鉴参考,希望对大家阅读完这篇能有所获。 bootstrap字体图标...
在这篇文章中,我们将学习“Bootstrap中引用字体图标有几种方法,代码是什么”的相关知识,下文有详细的介绍及示例,小编觉得挺不错的,有需要的朋友可以借鉴参考,希望对大家阅读完这篇能有所获。


bootstrap字体图标的引用方法:首先建一个fonts文件夹;然后放在和js、css文件同级目录下;最后通过“src: url('font/glyphicons-halflings-regular.eot'); ”方式引用字体图标即可。

本教程操作环境:Windows7系统、bootstrap3版,该方法适用于所有品牌电脑。

Bootstrap正确引用字体图标:

补充:

其实不需要下面这么麻烦,只需要建一个fonts文件夹放在和js,css文件同级目录下,就可以正确引用,关键是下面这几个文件得有:

第一种(字体文件的路径请灵活改变)

style type="text/css">

        @font-face {
    
            font-family: 'Glyphicons Halflings';
    
            src: url('font/glyphicons-halflings-regular.eot');
    
            src: url('font/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('font/glyphicons-halflings-regular.woff') format('woff'), url('font/glyphicons-halflings-regular.ttf') format('truetype'), url('fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

        }
    

第二种

!--style type="text/css">

            @font-face {
    
    font-family: 'Glyphicons Halflings';
    
    src: url('font/glyphicons-halflings-regular.eot');
    
    src: url('font/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
          url('font/glyphicons-halflings-regular.woff') format('woff'), 
          url('font/glyphicons-halflings-regular.ttf') format('truetype'),
          url('font/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

   }
    

注意:用font-size属性调整字体图标的大小,且不会失真。


以上就是关于“Bootstrap中引用字体图标有几种方法,代码是什么”的相关知识,感谢各位的阅读,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注网络,小编每天都会为大家更新不同的知识。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: Bootstrap中引用字体图标有几种方法,代码是什么
本文地址: https://pptw.com/jishu/653982.html
golang中Context的使用场景有哪些吗 用Bootstrap栅格系统如何实现可设置任意列

游客 回复需填写必要信息