咳咳,其实我是想copy过来的,然而,他竟然是用代码写的图标。。。

(正经脸)话说icon图标是一种网页中常用图标的一种,网络上有各式各样的应用案例,在此就不多啰嗦了。其实我也不过是用着现成的而已,所以很感谢制作并且推广的淫!

说说icon的使用,首先我们去net上下载一份icon文件,一般都叫什么favicon.ico,我们只需要引用其就可以了。引用方法如下:

使用方式如下:

这里说一下,虽然我是个萌新,并且技术渣渣。但是万一有人看了我的博客,并且受到了启发呢?所以还是说一下吧。

我写博客不会写实际代码在里边,只会放图片。一来easy,二来我希望每个人在学习的时候能够自己动手去写代码。而不是干看,或者更直接的copy。这样对技术的提升简直就像是蜗牛拉车!虽然第一次使用或者写某些不熟悉的代码会很慢甚至出错连连,但是我保证进步神速。因为我就是这么干的。

好了,言归正传。其实我们不光可以使用别人写好的文件和代码,我们也可以自己加入自己的东西在里面。如果熟悉ico的童鞋可能知道其原理,或者熟悉ps、AI等的也可能知道。不过是图标在win系统下的一种存储格式罢了。我们的计算机文件夹图标,我的电脑、回收站的各种图标都是这种格式的。我个人也经常DIY,然后替换我电脑上的各种千篇一律。所以,我们也是可以制作的。至于制作方法此文不多提,不是很麻烦,但是不熟悉修图软件的可能也够呛,不过前端的人应该不成问题。制作完成后,还需要修改FontAwesome.otf 文件,最后按照相同的格式引入进来使用就OK了。

最后,附上图标代码链接:

http://www.bootcss.com/p/font-awesome/design.html

说说icon图标的更多相关文章

  1. 用字体在网页中画Icon图标

    第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...

  2. JS组件系列——不容错过的两款Bootstrap Icon图标选择组件

    前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...

  3. 字体在网页中画ICON图标

    用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...

  4. Ext.Net TreePanel 修改Icon图标

    分类: Ext.Net2012-09-24 13:44 1779人阅读 评论(0) 收藏 举报 webformserverextassemblyxhtmlobject 1.默认icon 2.自定义ic ...

  5. QT5.5.0版本添加icon图标步骤

    1.制作icon图标文件 可以进入这个网站在线制作:http://www.ico.la/ 2.创建资源文件:qrc文件 接着 添加2两项,先点击prefix,然后添加文件--->图标路径 3.可 ...

  6. 启动页面设置,icon图标设置

    更多尺寸像素如何放置请看:http://chicun.jammy.cc/ 如何设置App的启动图,也就是Launch Image? 新建一个iosLaunchImage文件夹

  7. Flatty Shadow在线为Icon图标生成长阴影效果。

    Flatty Shadow在线为Icon图标生成长阴影效果. Flatty Shadow 彩蛋爆料直击现场 Flatty Shadow在线为Icon图标生成长阴影效果.

  8. Flex利用titleIcon属性给Panel容器标题部添加一个ICON图标

    Flex利用titleIcon属性,给Panel容器标题部添加一个ICON图标. 让我们先来看一下Demo(可以右键View Source或点击这里察看源代码): 下面是完整代码(或点击这里察看): ...

  9. 在网页中制作icon图标

    用字体在网页中画icon图标 第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮pr ...

  10. 12个Icon图标资源网站

    1.除了Icon以外,还有很多不错的UI设计素材. 地址:http://worldui.com/2.除了免费Icon资源下载以外,还提供Icon定制的付费服务.地址:http://dryicons.c ...

随机推荐

  1. 联想e431笔记本更改硬盘模式bios设置的详细教程

    用硬盘安装系统,就要进入bios,将硬盘改为第一启动项即可重装系统.不同品牌的电脑,它的bios设置方法也就不同.那么,联想e431笔记本要如何更改硬盘模式呢?今天U大侠小编就和大家分享联想e431笔 ...

  2. JavaWeb项目实现图片验证码

    一.什么是图片验证码? 可以参考下面这张图: 我们在一些网站注册的时候,经常需要填写以上图片的信息. 这种图片验证方式是我们最常见的形式,它可以有效的防范恶意攻击者采用恶意工具,调用“动态验证码短信获 ...

  3. VS2019 KEY

    VS2019正式版 密钥 Visual Studio 2019 破解 激活码 Key   Visual Studio 2019 Enterprise 企业版(亲测可用):BF8Y8-GN2QH-T84 ...

  4. No-11.变量进阶

    变量进阶 目标 变量的引用 可变和不可变类型 局部变量和全局变量 01. 变量的引用 变量 和 数据 都是保存在 内存 中的 在 Python 中 函数 的 参数传递 以及 返回值 都是靠 引用 传递 ...

  5. CSS 隐藏 visibility 属性

    定义和用法 visibility 属性规定元素是否可见. 提示:即使不可见的元素也会占据页面上的空间.请使用 "display" 属性来创建不占据页面空间的不可见元素. 说明 这个 ...

  6. ajax实现上传图片保存到后台并读取

    上传图片有两种方式: 1.fileReader  可以把图片解析成base64码的格式,简单粗暴 2.canvas  可以重新绘制一张图片,可以先把获取得到的图片的blob放进canvas里面,再生成 ...

  7. 如何利用 CSS 动画原理,在页面上表现日蚀现象

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教 ...

  8. vs实用插件

    Live Share 强烈推荐的一款插件,能在VS程序中打开文件并且显示他的效果.非常非常实用!,具体功能介绍在你搜索该插件时候有说明,非常非常好用的一款插件! 后续插件推荐转载参考与其他博主 1.C ...

  9. python--动态传参,作用域,函数嵌套

    一 . 动态传参(重点)  * ,  ** * 与 ** * 在形参位置. * 表示不定参数, 接收的是位置参数 接收到的位置参数的动态传参: 都是元组 def eat(*food): # 在形参这里 ...

  10. django第8天(在测试文件中运行django项目|单表操作)

    django第8天 在测试文件中运行django项目 1.将项目配置文件数据库该为mysql,修改配置信息 PORT = '127.0.0.1' DATABASES = { 'default': { ...