css3有内置图标吗?

有时项目中需要用到的一些特殊字符和图标,那么css3中有内置的图标吗?又该怎么使用一些特殊字符和图标呢?下面我们一起来看看吧。

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>

效果图:

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

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

基本形状

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

更多CSS相关技术文章,请访问CSS3答疑栏目进行学习!

以上就是css3有内置图标吗?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读