如何在元素内容前后加图标
2019-02-25 16:09:46来源：博客园 阅读 ()
大家最常用作图标的元素是i标签，为什么呢？
- 用 <i> 元素做图标在语义上是不正确的（虽然看起来像 icon 的缩写）；
- <i> 比 <span> 短，但 gzip 后差异很小，不过打字可以少按三个键；
- 多数图标用的是空 <i> 元素，配合 ::before 伪元素实现，因为没有内容，读屏器不会朗读（这样即使有特殊处理也跳过了），机器理解起来应该也没什么影响。
综合来看，从实用性上暂时没看出有什么缺陷，所以目前用不用 <i> 取决于你对于遵循规范有多洁癖。
具体如何在元素内容前后添加图标呢？这就要用使用伪元素:before和after，语法：
cssSelector:before{…} cssSelector.after{…}
1. 直接插入图片
#example:before { content:url(imgUrl); … }
2. 使用特殊字符
2.1 语法
#example:before { content:”\21E0”; … }
2.2 HTML特殊字符的html、js、css写法汇总表
? 箭头类
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
? |
⇠ |
\u21E0 |
\21E0 |
? |
⇢ |
\u21E2 |
\21E2 |
|
? |
⇡ |
\u21E1 |
\21E1 |
? |
⇣ |
\u21E3 |
\21E3 |
|
? |
↞ |
\u219E |
\219E |
? |
↠ |
\u21A0 |
\21A0 |
|
? |
↟ |
\u219F |
\219F |
? |
↡ |
\u21A1 |
\21A1 |
|
← |
← |
\u2190 |
\2190 |
→ |
→ |
\u2192 |
\2192 |
|
↑ |
↑ |
\u2191 |
\2191 |
↓ |
↓ |
\u2193 |
\2193 |
|
? |
↔ |
\u2194 |
\2194 |
? |
↕ |
\u2195 |
\2195 |
|
? |
⇄ |
\u21C4 |
\21C4 |
? |
⇅ |
\u21C5 |
\21C5 |
|
? |
↢ |
\u21A2 |
\21A2 |
? |
↣ |
\u21A3 |
\21A3 |
|
? |
⇞ |
\u21DE |
\21DE |
? |
⇟ |
\u21DF |
\21DF |
|
? |
↫ |
\u21AB |
\21AB |
? |
↬ |
\u21AC |
\21AC |
|
? |
⇜ |
\u21DC |
\21DC |
? |
⇝ |
\u21DD |
\21DD |
|
? |
↚ |
\u219A |
\219A |
? |
↛ |
\u219B |
\219B |
|
? |
↮ |
\u21AE |
\21AE |
? |
↭ |
\u21AD |
\21AD |
|
? |
⇦ |
\u21E6 |
\21E6 |
? |
⇨ |
\u21E8 |
\21E8 |
|
? |
⇧ |
\u21E7 |
\21E7 |
? |
⇩ |
\u21E9 |
\21E9 |
|
▲ |
▲ |
\u25B2 |
\25B2 |
? |
► |
\u25BA |
\25BA |
|
▼ |
▼ |
\u25BC |
\25BC |
? |
◄ |
\u25C4 |
\25C4 |
|
? |
➔ |
\u2794 |
\2794 |
? |
➙ |
\u2799 |
\2799 |
|
? |
➨ |
\u27A8 |
\27A8 |
? |
➲ |
\u27B2 |
\27B2 |
|
? |
➜ |
\u279C |
\279C |
? |
➞ |
\u279E |
\279E |
|
? |
➟ |
\u279F |
\279F |
? |
➠ |
\u27A0 |
\27A0 |
|
? |
➤ |
\u27A4 |
\27A4 |
? |
➥ |
\u27A5 |
\27A5 |
|
? |
➦ |
\u27A6 |
\27A6 |
? |
➧ |
\u27A7 |
\27A7 |
|
? |
➵ |
\u27B5 |
\27B5 |
? |
➸ |
\u27B8 |
\27B8 |
|
? |
➼ |
\u27BC |
\27BC |
? |
➽ |
\u27BD |
\27BD |
|
? |
➺ |
\u27BA |
\27BA |
? |
➳ |
\u27B3 |
\27B3 |
|
? |
↷ |
\u21B7 |
\21B7 |
? |
↶ |
\u21B6 |
\21B6 |
|
? |
↻ |
\u21BB |
\21BB |
? |
↺ |
\u21BA |
\21BA |
|
? |
↵ |
\u21B5 |
\21B5 |
? |
↯ |
\u21AF |
\21AF |
|
? |
➾ |
\u27BE |
\27BE |
|
|
|
|
? 基本形状类
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
? |
❤ |
\u2764 |
\2764 |
? |
✈ |
\u2708 |
\2708 |
|
★ |
★ |
\u2605 |
\2605 |
? |
✦ |
\u2726 |
\2726 |
|
? |
☀ |
\u2600 |
\2600 |
◆ |
◆ |
\u25C6 |
\25C6 |
|
? |
◈ |
\u25C8 |
\25C8 |
? |
▣ |
\u25A3 |
\25A3 |
|
? |
☻ |
\u263B |
\263B |
? |
☺ |
\u263A |
\263A |
|
? |
☹ |
\u2639 |
\2639 |
? |
✉ |
\u2709 |
\2709 |
|
? |
☎ |
\u260E |
\260E |
? |
☏ |
\u260F |
\260F |
|
? |
✆ |
\u2706 |
\2706 |
? |
� |
\uFFFD |
\FFFD |
|
? |
☁ |
\u2601 |
\2601 |
? |
☂ |
\u2602 |
\2602 |
|
? |
❄ |
\u2744 |
\2744 |
? |
☃ |
\u2603 |
\2603 |
|
? |
❈ |
\u2748 |
\2748 |
? |
✿ |
\u273F |
\273F |
|
? |
❀ |
\u2740 |
\2740 |
? |
❁ |
\u2741 |
\2741 |
|
? |
☘ |
\u2618 |
\2618 |
? |
❦ |
\u2766 |
\2766 |
|
? |
☕ |
\u9749 |
\9749 |
? |
❂ |
\u2742 |
\2742 |
|
? |
☥ |
\u2625 |
\2625 |
? |
☮ |
\u262E |
\262E |
|
? |
☯ |
\u262F |
\262F |
? |
☪ |
\u262A |
\262A |
|
? |
☤ |
\u2624 |
\2624 |
? |
✄ |
\u2704 |
\2704 |
|
? |
✂ |
\u2702 |
\2702 |
? |
☸ |
\u2638 |
\2638 |
|
? |
⚓ |
\u2693 |
\2693 |
? |
☣ |
\u2623 |
\2623 |
|
? |
⚠ |
\u26A0 |
\26A0 |
? |
⚡ |
\u26A1 |
\26A1 |
|
? |
☢ |
\u2622 |
\2622 |
? |
♻ |
\u267B |
\267B |
|
? |
♿ |
\u267F |
\267F |
? |
☠ |
\u2620 |
\2620 |
￥ 货币类
|
符号 |
UNICODE |
符号 |
UNICODE |
||||
|
HTML |
JS |
CSS |
HTML |
JS |
CSS |
||
|
$ |
$ |
\u0024 |
\0024 |
￠ |
¢ |
\u00A2 |
\00A2 |
|
￡ |
£ |
\u00A3 |
\00A3 |
¤ |
¤ |
\u00A4 |
\00A4 |
|
原文链接:https://www.cnblogs.com/yscit/p/10420586.html 标签： 版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com 
相关文章
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设 网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源 网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它 服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护 软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷 网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash 
热门词条
最新资讯
热门关注
热门标签
| |||||||