菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
72
0

css3有内置图标吗?

原创
05/13 14:22
阅读数 1310

css3有内置图标吗?

css3没有内置图标,所有的图标都需要用户自己下载后使用。

但是我们可以通过设置特殊字符,来实现图标的样式。(推荐学习:CSS视频教程

下面是一个特殊字符来代替图标的案例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cross{
    width: 20px;
    height: 20px;
    background-color: #F3F9FF;
    border-radius: 10px;
    border: 1px solid #DBE6EF;
    display: inline-block;
    position: relative;
}
.cross:after{
    content: "\2715";//特殊字符或形状
    color: #a2b6c5;
    font-size: 12px;
    position: relative;
    left: 4px;
    bottom: 3px;
    cursor: pointer;
}
</style>
</head>
<body><div></div>


</body>
</html>

效果图:

Snipaste_2019-12-25_09-17-02.jpg

主要是使用了伪类元素 ::before 实现的,将特殊字符的代码写在content里即可。

下面为各位整理了一些常用的特殊字符,可以在项目中使用它们代替图标。

基本形状

▲ 25B2 ► 25BA ► 25BA ▼ 25BC
◄ 25C4 ❤ 2764 ✈ 2708 ★ 2605
✦ 2726 ☀ 2600 ◆ 25C6 ◈ 25C8
▣ 25A3

发表评论

0/200
72 点赞
0 评论
收藏
为你推荐 换一批