简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 前端开发20221025-1
Blogger Information
Blog 25
fans 0
comment 0
visits 9388
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
前端开发20221025-1
P粉114035831
Original
271 people have browsed it

字体图标

建二个文件 1.html 2.css

通过阿里巴巴网站图标库，找到需要的图标并收藏

html

<html>
<head>
<title>字体图标</title>
<link rel="stylesheet" href="css/font-icon1.css" />
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3737407_n2w7ymj3ai.css" />
</head>
<body>
<div class="iconfont class">
{<span class="icon-shezhi"></span>
<span class="icon-zhuce"></span>}
</div>
</body>
</html>

css

文件地址：css/font-icon1.css

.iconfont.class{
声明自定主字体
font-family:iconfont;
字体大小
font-size:xx-large;
字体颜色
color:blue;
}

.iconfont.class:hover{
颜色
color:red;
被选定时显示：小手
cursor:pointer;
被选定时的颜色，缓慢时间显示，变化
transition:color 0.5s linear;
}

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：1、一个作业写一篇文章；2、代码使用代码块；3、带上实例效果图
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！