如何在不覆盖自定义CSS的情况下将Glyphicons添加到我的Flask应用程序中？

问题描述

我试图在我的Flask Web应用程序中插入一些Glyphicons。

我将此行添加到模板的<head>：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

这是我的<head>文件的layout.html，它已由我的Web应用程序中的所有视图扩展：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- My CSS file -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='main.css') }}">
    <!-- Glyphicons -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">


    <!-- Text in the tab bar -->
    <title>{{ title }}</title>

    <!-- Math formulas -->
    <SCRIPT SRC='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></SCRIPT>
    <SCRIPT>MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'],['\\(','\\)']]}})</SCRIPT>

</head>

例如，我在html文件中使用以下行：

<a href="#"><span class="glyphicon glyphicon-question-sign"></span></a>

它可以工作，但是显然它会覆盖css文件夹中的static文件，因为网站中视图的所有间距和组织都发生了变化。如何在不覆盖我的css文件的情况下仅添加所需的字形？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

glyphicons html twitter-bootstrap