css图标 | 来自 fontawesome 字体文件的586 个小图标

news2024/9/24 3:20:58

1. css效果

/*!
 *  Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
 
.fa-glass:before {content:"\f000"}
.fa-music:before {content:"\f001"}
.fa-search:before {content:"\f002"}
.fa-envelope-o:before {content:"\f003"}
.fa-heart:before {content:"\f004"}

2. 使用py批量转换为html格式

# part I 转化一个
def toCss(str2):
    #str2='.fa-glass:before {content:"\f000"}'
    import re 
    arr = re.split(':', str2)[0]
    arr=arr[1:]
    return "<i class='fa %s' title='%s'></i>" %(arr, arr)

# test
toCss('.fa-film:before {content:"\f008"}')
## "<i class='fa fa-film' title='fa-film'></i>"


# part II 转换全部
fr = open("css.txt", 'r')
fw = open("index.html", 'w')
header="""
<meta charset="utf-8">
<link rel="stylesheet" href="/static/css/font-awesome.min.css">

<style>
i{margin:10px;}
</style>
"""
fw.write(header + "\n")

i=0
while True:
    i +=1
    if i>10:
        #break
        pass
    lineR = fr.readline()
    if not lineR:
        break;
    line = lineR.strip()
    
    css = toCss(line)
    #print(i, line, css)
    fw.write(css + "\n")
fr.close()
fw.close()

print("end", i)
# 586 个小图标

3.效果图

在这里插入图片描述
可以目测效果图,然后鼠标右击查看样式代码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/823232.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

云原生势不可挡,如何跳离云原生深水区?

云原生是云计算领域一大热词&#xff0c;伴随云原生概念而来的是数字产业迎来井喷、数字变革来临、数字化得以破局以及新一波的技术红利等等。云原生即“云”原生&#xff0c;顾名思义是让“应用”最大程度地利用云的能力&#xff0c;发挥云价值的最佳路径。具体来说&#xff0…

transformers里的AutoTokenizer之返回值token_type_ids(二)

在很多案例中&#xff0c;AutoTokenizer会返回token_type_ids这个结果&#xff1a; token_type_ids的解释&#xff1a; 对于两个句子对来说&#xff0c;上一句都标识为0&#xff0c;下一句都标识为1。

ChatGPT + Stable Diffusion + 百度AI + MoviePy 实现文字生成视频,小说转视频,自媒体神器!(一)

ChatGPT Stable Diffusion 百度AI MoviePy 实现文字生成视频&#xff0c;小说转视频&#xff0c;自媒体神器&#xff01;(一) 前言 最近大模型频出&#xff0c;但是对于我们普通人来说&#xff0c;如何使用这些AI工具来辅助我们的工作呢&#xff0c;或者参与进入我们的生活…

K8s的详细介绍

1.编写yaml文件的方式 2.yaml里面的内容介绍 Pod实现机制&#xff1a;&#xff08;1&#xff09;共享网络&#xff08;2&#xff09;共享存储 共享网络:通过Pause容器&#xff0c;把其他业务容器加入到Pause容器里面&#xff0c;让所有业务容器在同一个名称空间中&#xff0c;…

Linux 基础入门篇

挂载点 先在这块新的存储上做文件系统&#xff0c;但是并不是挂载到全局目录树的根上了&#xff0c;你是想让/home 目录和它关联&#xff0c;所以你需要把它挂载到/home目录上 新的粉色的存储设备上的文件系统挂载在了/home 目录&#xff0c;全局目录树/home就和粉色文件系统的…

一起学算法(二维数组篇)

1.概念定义 1.矩阵的定义 矩阵A(nm)的定义时按照长方形排列的复数或实数集合&#xff0c;其中n代表的是行数&#xff0c;m代表的是列数。如下所示&#xff0c;代表的是一个4x3的矩阵 在Java中&#xff0c;我们可以用A[n][m]来代表一个n*m的矩阵&#xff0c;其中A[i][j]代表的是…

Java如何实现将类文件打包为jar包

目录 将类文件打包为jar包 1.写类文件2.编译3.测试4.打jar包jar包应该怎么打&#xff1f; 1.首先确保你的项目2.选中你的项目,点右键3.选择runnable jar file4.如下图,直接看图5.然后点finish 将类文件打包为jar包 为实际项目写了一个工具类&#xff0c;但是每次使用时都需要…

记录--一个好用的轮子 turn.js 实现仿真翻书的效果

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 国际惯例&#xff0c;官网链接 官网传送门 Github地址 github上有几个demos例子&#xff0c;介绍了基础用法。 我参考官网的例子&#xff0c;写了一个demo示例 安装 turn.js 依赖 jquery 库&#xff0…

C++设计模式之建造者设计模式

C建造者设计模式 什么是建造者设计模式 建造者设计模式是一种创建型设计模式&#xff0c;它是一种将复杂对象的分解为多个独立部分的模式&#xff0c;以便于构建对象的过程可以被抽象出来并独立变化。 该模式有什么优缺点 优点 灵活性&#xff1a;建造者设计模式允许对象的…

Nacos1.4.1集群——服务注册失败的原因

前言&#xff1a; 学习nacos的时候碰到的问题 当你单击启动的时候不会出现问题 命令&#xff1a; 单击&#xff1a; startup.cmd -m standalone 集群&#xff1a; startup.cmd -m cluster 当时当你启动集群的时候他会默认把你本地的ipv6那个地址默认放上出 会导致你本来搭建集群…

牛客网Verilog刷题——VL56

牛客网Verilog刷题——VL56 题目答案 题目 实现4bit无符号数流水线乘法器设计。电路的接口如下图所示&#xff1a; 输入输出描述&#xff1a; 信号类型输入/输出位宽描述clkwireInput1系统时钟信号rst_nwireInput1异步复位信号&#xff0c;低电平有效mul_awireInputsize乘数mu…

【动态规划part16】| 583.两个字符串的删除操作、72.编辑距离

&#x1f388;LeetCode583.两个字符串的删除操作 链接&#xff1a;583.两个字符串的删除操作 给定两个单词 word1 和 word2 &#xff0c;返回使得 word1 和 word2 相同所需的最小步数。 每步 可以删除任意一个字符串中的一个字符。 public int minDistance(String word1, Str…

基于Amoeba读写分离(三十六)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 今天要学的是基于Amoeba读写分离。Amoeba是一个开源的关系型数据库管理系统&#xf…

计网第四章网络层错题

4.1 没有要求结点要相邻&#xff0c;可不可靠主要取决于使用的协议&#xff0c;若使用有连接的 就可靠 2.C 本题易误选B 因为大家以为只能用ipv4 但是有特定的路由器可以连接IPv4和IPv6&#xff0c;所以网络层的协议也可以不同 C 路由器无法处理比网络层更高层次的数据 所以…

Redis集群Cluster搭建

Redis集群Cluster搭建 集群框架1、下载redis2.创建Cluster文件3.修改redis配置文件4.启动redis5.链接各个redis6.分配槽位7.添加从机节点&#xff08;备份Redis&#xff09;8.以集群方式登录9.使用开源Redis可视化客户端链接 集群框架 三个集群节点&#xff0c;每个节点有个副本…

Ubuntu安装MySQL 8.0与Navicat

目录 Ubuntu安装MySQL 8.0 1、更新软件包列表 2、安装 MySQL 8.0 3、启动 MySQL 服务 5、确保MySQL服务器正在运行 5、root 用户的密码 6、登录MySQL&#xff0c;输入mysql密码 7、MySQL默认位置 Ubuntu安装Navicat 1、下载 Navicat 2、额外的软件包 3、执行命令 U…

IDEA离线环境搭建远程开发-Windows

公司的云桌面实在太卡&#xff0c;多个微服务项目跑起来&#xff0c;直接无法进行其它编码工作&#xff0c;所以想到使用Idea提供的远程开发功能&#xff0c;将服务运行在服务器&#xff0c;电脑只提供给开发页面展示&#xff0c;提高效率。 环境介绍&#xff1a; 开发环境&…

python——案例六:清空列表用clear()方法实现

案例六&#xff1a;清空列表用clear()方法实现LIST[0,1,2,3,4,5] print(清空前&#xff1a;,LIST) LIST.clear() print(清空后&#xff1a;,LIST)

Carsim的基本功能介绍

Carsim 是一款汽车动力学模拟软件&#xff0c;它可以模拟车辆在路面上的运动和行驶行为&#xff0c;支持用户进行不同情况下的测试和研究。以下小师弟所了解的Carsim最基础的使用方法&#xff1a; 安装 Carsim 软件并打开。 Carsim是一个比较简单容易上手的软件&#xff0c;打…

保姆级教程,Linux服务器docker搭建jenkins持续集成一键部署SpringBoot项目(Gradle)

前言&#xff1a; 在后台项目开发过程从Java延伸到Kotlin开发&#xff0c;从maven pom到gradle&#xff0c;IDEA新项目SpringBoot init框架官方推荐kotlingradle&#xff0c;本章以此为jenkins持续集成做项目部署&#xff0c;服务器为Centos&#xff0c;JDK 17&#xff0c;Spr…