怎么在网站上下载图标

html-css026

怎么在网站上下载图标,第1张

下载图标1由于度娘限制，自己百度下载地址吧~输入“阿里巴巴矢量图标库”百度搜索第一位就是啦2打开网址，你可以选择右上角的搜索，搜索自己要的图标，例如美女3也可以选择去图标库自行选择想要的图标4选择图标，点击图标变成橘色，即放在暂存架5再次点击即可取消，或者在暂存架中鼠标滑过图标，图标右上角有删除小按钮也可删除选中6选择好要用的图标后，点击暂存架的下载至本地，解压待用END项目引用1打开解压的文件夹中的demo.html2我们下载的图标可看到了吧，按照demo的步骤，下面我们配置ionic的项目3静态文件存放目录，新建font文件夹用来存放字体文件（可自定义存放）4css使用font-face声明字体5css定义使用iconfont的样式6挑选相应图标并获取字体编码，应用于页面就可以显示图标啦ENDTab及其他标签引用图标1大家发现，Ionic的图标只要加个类似ion-happy ion-XXX的class就可以应用相应的图标，那么我们怎么用阿里巴巴的矢量图标呢，不要急也有办法打开直接解压的图标文件中的iconfont.css文件2将那些.icon-XXX:before{content:'XXXX'}也复制到你的css文件中去看过ionic css文件源码的童鞋，是不是看到这些有点熟悉呢3那就对啦，只要在class中加 iconfont icon-XXX就可以使用图标了如果P4P没有用好的话，反而会影响到自然流量，建议系统学习一下P4P《史上最全P4P系列课》

可以在阿里图库中下载相应的图标，下到本地后

第一步：拷贝项目下面生成的font-face

@font-face {font-family: 'iconfont'

src: url('iconfont.eot')

src: url('iconfont.eot?#iefix') format('embedded-opentype'),

url('iconfont.woff') format('woff'),

url('iconfont.ttf') format('truetype'),

url('iconfont.svg#iconfont') format('svg')

}

第二步：定义使用iconfont的样式

.iconfont{

font-family:"iconfont" !important

font-size:16pxfont-style:normal

-webkit-font-smoothing: antialiased

-webkit-text-stroke-width: 0.2px

-moz-osx-font-smoothing: grayscale}

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33</i>

font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

兼容性良好，支持ie8+，及所有现代浏览器。

相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。

因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。

不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

第一步：拷贝项目下面生成的fontclass代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>

首先，打开CSSIcon网站，在搜索框中输入关键字，可以查找到相关的图标，也可以通过分类查找，比如社交媒体、电子邮件、购物等，还可以通过标签查找，比如箭头、锁、礼物等，这样就可以找到自己想要的图标了。