关于前端页面无法显示bootstrap字体图标的问题

男娘i 2022-11-30 04:29 260阅读 0赞

## 问题截图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTExMTI4NA_size_16_color_FFFFFF_t_70_pic_center]

## 解决之后![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTExMTI4NA_size_16_color_FFFFFF_t_70_pic_center 1] ##

## 解决过程 ##

1.  **在查看了页面细节后发现报下面这些错误**  
    ![在这里插入图片描述][20200823200924563.png_pic_center]
2.  **在网上查询报错原因**  
    原因是在引入bootstrap文件的时候没有将fonts文件夹一起引入
3.  **解决方式**  
    方法一：直接通链接引入bootstrap文件
    
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    
    方法二：通过链接下载对应的文件  
    我需要下的是  
    glyphicons-halflings-regular.woff  
    glyphicons-halflings-regular.woff2  
    glyphicons-halflings-regular.ttf
    
    可以直接通过这个网址去下载文件  
    http://cdn.bootcss.com/bootstrap/3.3.6/fonts/这里加上你所缺少的文件就可以下载了
    
    比如，你缺少  
    glyphicons-halflings-regular.woff2  
    网址就是  
    http://cdn.bootcss.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2
    
    然后新建一个fonts文件夹将下好的文件放进去，将fonts文件夹放置在项目静态文件夹下与css文件平级  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTExMTI4NA_size_16_color_FFFFFF_t_70]  
    问题成功解决

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTExMTI4NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/e290790e9e97469db31920be25cb8d6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTExMTI4NA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/e9efc51079c846dcbb5f14ea79403bd1.png
[20200823200924563.png_pic_center]: /images/20221124/30afaac5ae2942ab9abbfe230349c79b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTExMTI4NA_size_16_color_FFFFFF_t_70]: /images/20221124/0bcea70bb94e4f8c975de4b77916509e.png