前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >使用纯CSS给网站文章中的外链添加小图标

使用纯CSS给网站文章中的外链添加小图标

作者头像
德顺
发布于 2023-08-25 04:47:11
发布于 2023-08-25 04:47:11
48700
代码可运行
举报
文章被收录于专栏:前端资源前端资源
运行总次数:0
代码可运行

最近突然有一个想法,文章中的链接不够明显,可不可以在不修改类名的前提下,给所有 a 标签添加一个图标呢?

答案是肯定的,只有想不到,没有做不到。

我们可以分析一下, bootstrap 的组件图标库

它们在图标标签上加了一个伪类,这个伪类就代表了相对应的图标。

那么我可以直接拿这个标识来用吗?试一下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.article-content p a:after {
  content: "\e989";
}

但貌似不好用嘞,图标无法正常显示,显示小方块。

什么原因呢?我们先看一下字体的 CSS 源码,这里以阿里图标库的 iconfont 生成的 CSS 文件为例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1111'); /* IE9 */
  src: url('iconfont.eot?t=1111#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;') format('woff2'),
  url('iconfont.woff?t=1111') format('woff'),
  url('iconfont.ttf?t=11111') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1111#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-open_in_new:before {
  content: "\e989";
}

首先要自定义一个字体,然后把元素的 font-family 设置为这个字体,然后再给需要图标的元素设置伪类。

所以我要向直接用的话,需要给 a 标签设置一下字体。像下面这样:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.article-content p a {
  font-family: 'iconfont';
}

.article-content p a:after {
  content: "\e989";
}

如果只给外链设置图标,可以只选择带有 target='_blank'a 标签。像下面这样:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.article-content p a[target=_blank] {
  font-family: 'iconfont';
}

.article-content p a[target=_blank]:after {
  content: "\e989";
}

当然,可以把 iconfont 下载到本地,把 iconfont.css 在头部引入。

也可以直接生成 Unicode 代码,放在你 CSS 样式文件的开头,就可以愉快的给某个元素批量设置自定义图标了。

未经允许不得转载:w3h5-Web前端开发资源网 » 使用纯CSS给网站文章中的外链添加小图标

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-17),如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
Python3教程——5、Python3
Ctrl + Space 基本的代码完成(类、方法、属性) Ctrl + Alt + Space 类名完成 Ctrl + Shift + Enter 语句完成 Ctrl + P 参数信息(在方法中调用参数) Ctrl + Q 快速查看文档 Shift + F1 外部文档 Ctrl + 鼠标 简介(左键点击即可看到该函数或变量的位置) Ctrl + F1 显示错误描述或警告信息 Alt + Insert 自动生成代码 Ctrl + O 重新方法 Ctrl + Alt + T 选中 Ctrl + / 行注释(再次点击,解除注释,可同时选择多行一起注释) Ctrl + Shift + / 块注释 Ctrl + W 选中增加的代码块 Ctrl + Shift + W 回到之前状态 Ctrl + Shift + ]/[ 选定代码块结束、开始 Alt + Enter 快速修正 Ctrl + Alt + L 代码格式化 Ctrl + Alt + O 优化导入 Ctrl + Alt + I 自动缩进 Tab / Shift + Tab 缩进、不缩进当前行 Ctrl+X/Shift+Delete 剪切当前行或选定的代码块到剪贴板 Ctrl+C/Ctrl+Insert 复制当前行或选定的代码块到剪贴板 Ctrl+V/Shift+Insert 从剪贴板粘贴 Ctrl + Shift + V 从最近的缓冲区粘贴 Ctrl + D 复制选定的区域或行 Ctrl + Y 删除选定的行 Ctrl + Shift + J 添加智能线 Ctrl + Enter 智能线切割 Shift + Enter 另起一行 Ctrl + Shift + U 在选定的区域或代码块间切换 Ctrl + Delete 删除到字符结束 Ctrl + Backspace 删除到字符开始 Ctrl + Numpad+/- 展开折叠代码块 Ctrl + Numpad+ 全部展开 Ctrl + Numpad- 全部折叠 Ctrl + F4 关闭运行的选项卡
py3study
2020/01/09
1.8K0
Python3教程——5、Python3
IDEA2025快捷键Mac&Windows操作指令大全:提高开发效率的必备指南
在现代软件开发中,IntelliJ IDEA 已成为 Java 开发者的首选集成开发环境(IDE)。无论是代码编写、调试还是重构,IDEA 都为开发者提供了强大的支持,极大地提高了开发效率。通过高效的IDEA快捷键,你可以节省大量时间,从而专注于代码逻辑和功能实现。本文将为你提供一个详尽的 IDEA 2025 快捷键大全,包括 Mac 和 Windows 操作系统下的常用快捷键,帮助你在开发过程中更加高效和流畅。
猫头虎
2025/03/18
1880
最全IDEA快捷键
Ctrl + Space 基本代码完成(任何类、方法或变量的名称)【代码提示】 Ctrl + Shift + Space 智能代码完成(过滤器的方法和变量预期的类型列表) Ctrl + Shift + Enter 完成语句【不是完整语句时补全,已经是完整语句时换行】 Ctrl + P 查看方法可能的参数信息 Ctrl + Q 快速查看java API文档 Shift + F1 打开外部API文档【如果有的话maven项目特别好使】 Ctrl + mouse 悬浮显示鼠标覆盖的代码的简介【点击进入对应的源文件】 Ctrl + F1 显示详细的错误或警告描述 Alt + Insert 生成代码… (Getters, Setters, Constructors,hashCode/equals, toString) Ctrl + O 重写方法 Ctrl + I 实现方法 Ctrl + Alt + T 使用(if..else, try..catch, for,synchronized) 之类包围选中的代码或光标所在行 Ctrl + / 添加或取消行注释 Ctrl + Shift + / 添加或取消块注释 Ctrl + W 依次多选中【减少鼠标勾选】 Ctrl + Shift + W 依次少选中【减少鼠标勾选】 Alt + Q 查看所在部分对应的上下文信息 Alt + Enter 显示建议或快速修复 Ctrl + Alt + L 格式化代码 Ctrl + Alt + O 优化 imports Ctrl + Alt + I 将光标移动到下一行同样缩进的位置 Tab 添加缩进 Shift + Tab 取消缩进 Ctrl + X or Shift + Delete Ctrl + C or Ctrl + Insert Ctrl + V or Shift + Insert Ctrl + Shift + V 查看剪切板历史 Ctrl + D 复制当前行或代码块到下一行 Ctrl + Y 删除光标所在行 Ctrl + Shift + J 与下一行拼接【去除下一行的缩进添加一个空格】 Ctrl + Enter 将一行拆分为两行并添加缩进 Shift + Enter 新建一行 Ctrl + Shift + U 大小写切换【选中部分或光标所在的word】 Ctrl + Shift + ] 选中光标位置与块结束位置之间代码 Ctrl + Shift + [ 选中光标位置与块起始位置之间代码 Ctrl + Delete 删除光标所在位置到word结尾 Ctrl + Backspace 删除光标所在位置到word开始 Ctrl + 键盘上的+/键盘上的- 展开/折叠 代码块 Ctrl + Shift + 键盘上的+ 展开所有 Ctrl + Shift + 键盘上的- 折叠所有 Ctrl + F4 关闭当前Tab
三产
2021/01/12
6150
Python入门之PyCharm的快捷键与常用设置和扩展(Win系统)
1.  PyCharm的快捷键 2 . PyCharm的常用设置和扩展 --------------------------------------------------------------------------------------------------------------------------------------------------------- pycharm快捷键及一些常用设置 1、编辑(Editing) Ctrl + Space 基本的代码完成(类、方法、属性) Ct
Jetpropelledsnake21
2018/05/02
2.7K0
Python入门之PyCharm的快捷键与常用设置和扩展(Win系统)
PHPStorm 的常用快捷键,JetBrains家的除了Idea以外的都差不多了。
`Ctrl + Space` 基本代码完成(任意类的,方法的或者变量的名称) `Ctrl + Shift + Enter` 补全当前语句 `Ctrl + P` Parameter info (within method call arguments) `Ctrl + Q` 快速查找文档 `Ctrl + 鼠标滑过` 简明信息查看 `Ctrl + F1` 在插入符号处显示错误或者警告信息 `Alt + Insert` 生成代码…(Getters,Setters,Constructors) `Ctrl + O` 重写方法 `Ctrl + I` 实现方法 `Ctrl + Alt + T` 使用if…else,try…catch,for等包围代码 `Ctrl + /` 注释/取消行注释 `Ctrl + Shift + /` 注释/取消块注释 `Ctrl + W` 增量式选择代码 `Ctrl + Shift + W` 减少选择的代码块,与`Ctrl+W`相反 `Alt + Q` Context info `Alt + Enter` Show intention actions and quick-fixes `Ctrl + Alt + L` 格式化代码 `Ctrl + Alt + I` 自动缩进单行或者多行 `Tab/Shift + Tab` 缩进选中的行或者取消选中行的缩进 `Ctrl + X`or `Shift+Delete` 剪切 `Ctrl + C` or `Shift+Insert` 复制 `Ctrl + V` or `Shift+Insert` 粘贴 `Ctrl + Shift + V` `Ctrl + D` 复制当前的行或者选中的块 `Ctrl + Y` 在插入符号处删除行 `Ctrl + Shift + J` Join lines `Ctrl + Enter` Split line `Shift + Enter` 新起一行 `Ctrl + Shift + U` 切换大小写 `Ctrl + Shift + ]/[` 选择代码块到开始或者结尾 `Ctrl + Delete` 删除单词从光标处到到结尾 `Ctrl + Backspace` 删除单词从光标处到开头 `Ctrl + NumPad+/-` 展开或者折叠代码块 `Ctrl + Shift +NumPad+` 展开所有 `Ctrl + Shift +NumPad-` 折叠所有 `Ctrl + F4` 关闭编辑页面
用户2353021
2020/05/09
1.2K0
JetBrains系列IDE快捷键大全(转载)
编辑 快捷键组合 说明 Ctrl + Space 代码自动完成提示(选择) Alt + Enter 显示意图动作和快速修复 Ctrl + P 参数信息 (在调用方法参数忘记的时候,提示) Ctrl + Q 快速查找文件,可以查找当前类定义的文件等 Ctrl + 鼠标滑过 基本信息 Alt + Insert 生成代码...(细节需要多次操作会发现很有意思) Ctrl + O 重写方法(在PHPStorm中是重写父类方法,会有选择框) Ctrl + I 实现方法(一般是指实现接口类或抽象类方法) Ctrl +
lin_zone
2018/12/24
1.6K0
pycharm快捷键、常用设置、配置管理
1、编辑(Editing)Ctrl + Space    基本的代码完成(类、方法、属性) Ctrl + Alt + Space  快速导入任意类 Ctrl + Shift + Enter    语句完成 Ctrl + P    参数信息(在方法中调用参数) Ctrl + Q    快速查看文档
菲宇
2022/12/21
1.3K0
pycharm快捷键、常用设置、配置管理
PyCharm快捷键大全(windows+mac)
Pycharm有着丰富且强大的快捷键组合,如果能熟练掌握常见快捷键的使用,那么绝对能提高你代码的编写效率和质量。
吾非同
2020/11/03
38.6K0
[来稿]pycharm快捷键、tips、常用设置及版本控制 制
在PyCharm安装目录 /opt/pycharm-3.4.1/help目录下可以找到ReferenceCard.pdf快捷键英文版说明 or 打开pycharm > help > default keymap ref PyCharm3.0默认快捷键(翻译的)PyCharm Default Keymap 1、编辑(Editing) Ctrl + Space 基本的代码完成(类、方法、属性) Ctrl + Alt + Space 快速导入任意类 Ctrl + Shift + Enter 语句完成
小小科
2018/05/03
1.9K0
IntelliJ IDEA的动图演示快捷键大全!
本文参考了 IntelliJ IDEA 的官网,列举了IntelliJ IDEA(Windows 版)的所有快捷键。并在此基础上,为 90% 以上的快捷键提供了动图演示,能够直观的看到操作效果。
二哥聊运营工具
2022/07/11
1.1K0
IntelliJ IDEA的动图演示快捷键大全!
史上最全 PyCharm(Mac+Windows版) 快捷键整理,建议收藏备用
PyCharm 应该是最常用的 Python 编辑器之一了,今天整理了一份 PyCharm 快捷键大全,包含了 Mac 和 Windows 版本,建议收藏备用。
Python小二
2022/08/24
3.8K0
史上最全 PyCharm(Mac+Windows版) 快捷键整理,建议收藏备用
IDEA快捷键
IntelliJ IDEA 的便捷操作性,快捷键的功劳占了一大半,对于各个快捷键组合请认真对待。IntelliJ IDEA 本身的设计思维是提倡键盘优先于鼠标的,所以各种快捷键组合层出不穷,对于快捷键设置也有各种支持,对于其他 IDE 的快捷键组合也有预设模板进行支持。
IT小马哥
2020/07/15
1.2K0
IDEA快捷键大全,撸代码速度提升10倍!
最近帮大家整理了一篇 idea 快捷键大全,包含了 win 和 mac 版,文末有高清 PDF 版本,可以打印出来贴在工位上,闲的时候瞅几眼,撸代码的速度将大幅提升。
路人甲Java
2021/10/20
1.4K0
IDEA Windows + Mac 快捷键(全)
Windows快捷键 Ctrl 快捷键 介绍 Ctrl + F 在当前文件进行文本查找 (必备) Ctrl + R 在当前文件进行文本替换 (必备) Ctrl + Z 撤销 (必备) Ctrl + Y 删除光标所在行 或 删除选中的行 (必备) Ctrl + X 剪切光标所在行 或 剪切选择内容 Ctrl + C 复制光标所在行 或 复制选择内容 Ctrl + D 复制光标所在行 或 复制选择内容,并把复制内容插入光标位置下面 (必备) Ctrl + W 递进式选择代码块。可选中光标所在的单词或段落,连续按
HaC
2020/12/31
20.8K0
IDEA 2021.1 的 Win 和 Mac 快捷键大全!
跟大家分享一下,IntelliJ IDEA 2021 Win 和 Mac 快捷键大全,IDEA 基本所有功能都可以通过快捷键来完成。
杰哥的IT之旅
2021/06/01
1.4K0
相关推荐
Python3教程——5、Python3
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文