在Flask表中使用FontAwecome图标

2024-09-27 00:23:23 发布

您现在位置:Python中文网/ 问答频道 /正文

我有一个pandas数据框,在我的Flask应用程序中显示为HTML,我想在该表中添加一个字体图标作为列,并根据每组的计数重复它。例如,在此场景中:

^{tb1}$

我希望图标在A组重复一次,在B组重复两次。下载软件包后,我可以在导航栏中显示图标。unicode/<i>标记(不确定需要哪一个)是:

  • &#xf091
  • <;i class="fa fa-trophy" aria-hidden="true"></i>

Tags: 数据标记应用程序flaskpandashtmlunicode场景
1条回答
网友
1楼 · 发布于 2024-09-27 00:23:23
  • 与在HTML中包含字体图标的方式相同。在一个<span>内有适当的class
  • 根据需要重复<span>多次
  • 考虑是否需要撤消的转义<>
  • 这是在Jupyter中运行的,但对于flask
import io
import pandas as pd

df = pd.DataFrame({'Group': ['A', 'B'], 'Count': [1, 2]})

df = df.assign(Icon=df["Count"].apply(lambda n: n*'<span class="fab fa-docker"></span>'))

from IPython.core.display import display, HTML
display(HTML(df.to_html().replace("&lt;","<").replace("&gt;",">")))

enter image description here

集成到flask

  • 用于基于计数生成字体图标的相同代码
  • 撤消的逃逸<>
  • 包含指向字体设计所需CDN的链接
  • 使用f-string生成html文档的简单方法
import pandas as pd
from flask import Flask, render_template, Response, jsonify

app = Flask(__name__)

@app.route('/')
@app.route('/home')
def home():
    df = pd.DataFrame({'Group': ['A', 'B'], 'Count': [1, 2]})
    df = df.assign(Icon=df["Count"].apply(lambda n: n*'<span class="fab fa-docker"></span>'))

    return f"""<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>SO example</title>
</head>
<body>
    {df.to_html().replace("&lt;","<").replace("&gt;",">")}
    
</body>
</html>"""


if __name__ == '__main__':
    app.run(debug=True, port=3000)

相关问题 更多 >

    热门问题