CSS 图标

news/2024/12/28 19:19:02/

CSS 图标

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body><p>一些 Font Awesome 图标:</p>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i><p>有样式的 Font Awesome 图标(尺寸和颜色):</p>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>
<i class="fas fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fas fa-book" style="font-size:60px;color:lightblue;"></i></body>
</html>

在这里插入图片描述

google

<!DOCTYPE html>
<html>
<head>
<title>Google Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body><p>一些 Google 图标:</p>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
<br><br><p>有样式的 Google 图标(尺寸和颜色):</p>
<i class="material-icons" style="font-size:24px;">cloud</i>
<i class="material-icons" style="font-size:36px;">cloud</i>
<i class="material-icons" style="font-size:48px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:lightblue;">cloud</i></body>
</html>

在这里插入图片描述


http://www.ppmy.cn/news/406519.html

相关文章

CSS动图效果

:-: 过度 /* transition 过度动画作用属性 -- transition-property时间间隔 -- transition-duration动图效果 -- transition-timing-function等待延时 -- transition-delay */transition: all .5s linear .3s;/* cubic-bezier 贝塞尔曲线函数 */transition: all .5s cubic-bezi…

【Web前端HTML5CSS3】14-雪碧图与渐变

笔记来源&#xff1a;尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 文章目录 雪碧图与渐变1. 雪碧图2. 线性渐变3. 径向渐变 雪碧图与渐变 1. 雪碧图 解决图片闪烁的问题&#xff1a; 可以将多个小图片统一保存到一个大图片中&#xff0c;然后通过调整background…

CSS-Sprite(雪碧图)

CSS-Sprite &#xff08;解决HTML图片闪烁问题&#xff09; 1. 描述 图片属于网页中的外部资源&#xff0c;外部资源都需要浏览器单独发送请求加载&#xff0c;浏览器加载外部资源时是按需加载&#xff0c;用则加载&#xff0c;不用则不会加载。如果我们使用所需要的图片刚好…

html网页title旁边的小图标制作教程

这几天&#xff0c;为了解决title前边的小图标&#xff0c;忙了好一段时间&#xff0c;终于做出来了&#xff0c;虽然还不是很好&#xff0c;但还是很开心了。 你看&#xff0c;就是下边这样的图标。 那要怎样做呢&#xff1f;接下来让我为你慢慢道来。 1.首先&#xff0c;你…

css(雪碧图,渐变色,放射渐变)

一.雪碧图 解决图片闪烁问题&#xff0c;提高网站的性能&#xff0c;可以使用 雪碧图/精灵图 ,学名&#xff1a;图片整合技术 实现原理&#xff1a; 将多张图片整合在一起&#xff0c;然后一次性引入到网站中&#xff0c; 减少网络请求&#xff0c;以提高网站的性能 实现步骤&…

HTML-img图片标签

文章目录 img 图片标签1. 说明2. 属性3. 补充1. png24 图片问题2. 解决方法&#xff1a; img 图片标签 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>图片标签</title></head><body><img src&qu…

CSS - 背景图片

使用<body>标签使用一般标签进行拓展至整个页面 <!DOCTYPE html> <html xmlns"http://www.w3.org/1999/xhtml" lang"zh"><head><meta http-equiv"content-type" content"text/html; charsetUTF-8"><…