• 技术文章 >web前端 >Bootstrap教程

    bootstrap字体图标怎么引用

    藏色散人藏色散人2020-11-30 15:41:52原创613

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

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

    推荐:《bootstrap教程

    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字体图标怎么引用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:bootstrap
    上一篇:bootstrap删格系统是什么 下一篇:Bootstrap4.5栅格系统的任意列问题怎么解决?
    大前端线上培训班

    相关文章推荐

    • 怎么解决bootstrap乱码问题• 如何解决360浏览器不兼容bootstrap问题• bootstrap 如何设置移动端元素隐藏• bootstrap删格系统是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网