首页
学习
活动
专区
圈层
工具
发布

在链接前面自动添加favicon 图标(jquery)

相信你在一些网站上看过类似的东东,就是在一个可点击外链左侧,会有一个目标链接网站的favicon 图标。...这一个小小的设置可能对提升用户体验有不少帮助,一些WordPress 站点也利用这个来做“友情链接”页面。...下面介绍一下实现的方法,只要是jquery 的运用+一个获取网站favicon 图标的接口(api)。...domain=xxxx,那就是一个获取网站favicon 图标的接口,来自谷歌,比如本站的调用代码就是: http://www.google.com/s2/u/0/favicons?...domain=devework.com 但由于大中华局域网的原因,谷歌的接口已经被和谐(事实上上面的链接会跳转到G+ 的子域下,G+ 在天朝,没有的东西),你可以用以下类似接口替换实现: http://

1.7K90
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    友情链接前面自动获取并添加favicon.ico小图标

    之前看到可风博客底部友情链接都加了ico小图标,感觉很新颖,很好看。...于是乎我也开始折腾,我不想每次添加友情链接的时候都得手动的去添加ico图标的小链接,浪费时间,然后就百度了以下,还真有教程,然后我就搬过来了,当然,文章版权还是要保留的,尊重别人的劳动成果。...自动添加img标签代码如下: ?...其中:“#link-home li a”是友情链接的ID(也可以换成class名,具体需要查看你网站的写法) 比如“锦鲤”主题的写法就是ID:“link-home”(很简单) 给友情链接自动添加链接时,如果在超链接的旁边再附带上这个网站的favicon图标,能够带来非常好的显示效果。(具体可见本博客的 友情链接 页面)   如何获取favicon?

    1.9K30

    友情链接前面自动获取并添加favicon.ico小图标

    此代码采用了缓存机制,即不用每次都从各个友情链接网站的代码里面去抓取,挺方便的, 然后用你的网址替换上面的“//XXXXX部分为需要获取的目标网站网址  例如https://ico.wenytao.com...但如果是https://头,则必须加上 具体效果可以到网站首页底部或者我的留言板页面的“内页链接”查看详细demo,此favicon图标采用了缓存机制,即不用每次都从各个友情链接网站的代码里面去抓取,代码只需要一小段...this.href.replace(/^(http:\/\/[^\/]+).*$/, '').replace( 'http://', '' )+">");   });}); 注意修改红色代码,就是友情链接的...网上的很多方法都是通过调用google的api接口,但是google在大陆被屏蔽了,所以自然用不了,这里用的是本站的接口。

    62620

    友情链接如何自动获取并添加favicon.ico小图标

    看到有的站点底部友情链接都添加了favicon.ico小图标,感觉挺新颖好看的,于是也开始折腾网站,一开始是添加友情链接的时候手动去添加ico图标链接,一来很浪费时间,后来百度了下还真有教程,这边照搬过来分享...,当然文章版权还需要尊重原作者,尊重别人的劳动成果,部署过程如下 PHP源代码 PHP源代码(代码链接:Github)  作者:沈唁 作者博客:https://qq52o.me v1为缓存ico在本地服务器上...,有的人不需要更新了v2,使用v2文件夹下的代码即可 下载源代码部署到网站目录如下图,只需保留这两个文件即可 API调用方式 请求方式:GET 请求参数:get.php?...url=xxxx.com 参数:XXXXX(需要获取的目标网站网址 例如?

    1.5K40

    用webfont为你的网站添加图标

    有些网站的图标不存在对应的图片文件,也并非通过js画图,它们的CSS长这样: h2::before{ content:'\e942' } 实际上e942是这个字符的16进制unicode编码,在unicode...如果我们向网站引入自定义后的字体,就可以用上面的方式显示图标了。...css引入webfont: @font-face { font-family:;/**相当于变量名,可以自己定义,如果元素中的font-family对应这里,@font-face为这些元素定义了字体族,...他们将使用src定义的字体**/ src:;/**使用的字体,可以是local("font名称")或者url("url地址"),支持多个来源**/ } @font-face还可以为不同格式、不同字重的文字匹配字体...App Ionicons: The premium icon font for Ionic Framework Fontello - icon fonts generator 想了解更多关于css插入图标的细节

    1.1K20

    VisualStudio 给项目添加特殊的 Nuget 的链接

    有一些项目需要使用一些特殊的 Nuget 才可以下载,但是不能在开源的项目需要小伙伴下载仓库在自己的 VisualStudio 修改自己的 Nuget 链接才能编译,本文告诉大家将某个项目独立的 Nuget...配置放在一个文件 如果有安装 dotnet core 的小伙伴,只需要在项目所在的文件夹输入下面代码就可以创建 Nuget 配置文件 dotnet new nuget 就可以看到在 csproj 文件所在的文件夹看到...-- 取消注释将会让全局的配置失效,被清空,只使用下面定义的 Nuget 下载--> 的阅读体验。...欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接: https://lindexi.gitee.io ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。

    52730

    VisualStudio 给项目添加特殊的 Nuget 的链接

    有一些项目需要使用一些特殊的 Nuget 才可以下载,但是不能在开源的项目需要小伙伴下载仓库在自己的 VisualStudio 修改自己的 Nuget 链接才能编译,本文告诉大家将某个项目独立的 Nuget...配置放在一个文件 如果有安装 dotnet core 的小伙伴,只需要在项目所在的文件夹输入下面代码就可以创建 Nuget 配置文件 dotnet new nuget 就可以看到在 csproj 文件所在的文件夹看到...value="https://api.nuget.org/v3/index.json" /> 假如我需要通过 myget 下载一些没发布的库...dotnet.myget.org/F/dotnet-core/api/v3/index.json" /> 但是我自己全局也有一些特殊的...-- 取消注释将会让全局的配置失效,被清空,只使用下面定义的 Nuget 下载--> <add key="nuget" value="https://api.nuget.org

    40420

    dotnet tool 判断博客文档链接是否可用的工具

    本文来和大家安利一个好用的工具,通过这个工具可以找到自己博客文档里面,是否存在有链接已经失效了 安装 dotnet tool install -g Lindexi.Tool.CheckBlogUrlAvailable...使用 CheckBlogUrlAvailable [folder] 调用此命令,将会找到当前文件夹内所有的 md 文档,读取里面的内容,找到里面的连接,尝试访问链接 其中 folder 文件夹如不写则采用当前命令的工作文件夹...原理 通过正则匹配当前文件夹里面所有的 md 文档的内容,尝试找到属于链接的字符串,接着尝试去访问这个链接。...,同时有更好的阅读体验。...欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接: https://blog.lindexi.com ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。

    38610

    Ubuntu添加Chrome图标到启动器的正确姿势

    : 将Chrome设置为默认浏览器之后,无论点击什么链接都只是打开了一个空白的新标签页 启动器的图标右键点开之后只有 “新标签页 - Google Chrome” 一个选项,没有新建窗口或者是新建隐身窗口的选项...,点击启动器上的图标切换窗口也很有问题 一开始我通过 这篇帖子 解决了第一个问题,但第二个问题仍然百思不得其解。。。...当Chrome成为了默认浏览器,其它程序调用Chrome打开链接的时候,那个代表将要打开的链接的参数并没有没有传到 /usr/bin/google-chrome-stable 程序上,因此点击链接后打开的是一个空白的...发现了问题所在,我直接删除 ~/.local/share/applications/google-chrome.desktop ,这时候启动器上的图标消失了,重新在搜索框找到Chrome图标拖到启动器,...所以,要添加Chrome浏览器到启动器,只需像安装其他程序一样,装完后直接在搜索那里找到对应的程序拖到侧栏即可。 不知道又会有多少人继续被那教程坑呢╮(╯_╰)╭

    3.1K10

    为 Web 页面添加 iPhone 固定标签页的图标

    为 Web 页面添加 iPhone 固定标签页的图标 2017-10-27 16:16 我曾经将一个 Web 标签页固定到 iPhone 的主屏幕上...当时没有留意,可直到今天发现我的博客页面在我的 iPhone 主屏幕上显示一片空白后,才想起来原来还可以自定义图标。 ---- 将 Web 页面图标固定到主屏幕: ?...方法非常简单,只需要在我 html 里的 head 中加入以下代码即可: 图标的链接.svg" /> 对于我的博客,也就是这篇文章来说...,我用了我的个人头像作为图标。...欢迎转载、使用、重新发布,但务必保留文章署名 吕毅 (包含链接: https://walterlv.com ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布

    1.3K20

    如何使用优聚集快捷添加链接的功能说明

    第一步 在优聚集个人中心,生成每个人的专属token ? 第二步 复制个人专属代码 ? 第三步 新建一个浏览器书签 名称:随意 地址:上面复制的代码 ?...可能的问题 1、找不到新建书签的路径 可以先随便添加一个网站的书签: ? 然后再修改【地址】为上面的那串代码: ?...另外,建议将此书签放在浏览器顶级文件夹中【顶级:即下图的收藏夹栏】,这样就可以一键添加至优聚集 ? 效果 ? ?...注意事项 切记,勿将携带个人身份标识的链接添加至公共盒子 切记,勿将携带个人身份标识的链接添加至公共盒子 切记,勿将携带个人身份标识的链接添加至公共盒子 切记,勿将携带个人身份标识的链接添加至公共盒子...携带个人身份标识: 即:比如本功能提供的代码中的 token 字段即属于个人身份标识: ?

    2K10
    领券