首页 > 代码库 > icon with jqmobi or ionic

icon with jqmobi or ionic

2024-08-01 14:22:25   212人阅读

推荐一个 自定矢量图标的网址
http://fortawesome.github.io/Font-Awesome/


1.下载图中的下载按钮 下载需要的矢量图标资源 并解压；
2.新建一个 cordova project 无论是ionic 还是 jqmobi框架都是可以的，你自己喜欢就好 O(∩_∩)O~~
3.转到你的项目下的www文件夹下，新建一个 fonts 文件夹；把 1. 中下载的矢量图标资源 的fonts 文件下的文件 全部拷贝到刚刚建好的 www/fonts/文件下；
4.在你的www/css/style.css 文件中引用 上面 3. 的文件 具体如下

@font-face {font-family: ‘fontawesome‘;src:url(‘../fonts/fontawesome-webfont.eot‘);src:url(‘../fonts/fontawesome-webfont.eot‘) format(‘embedded-opentype‘),url(‘../fonts/fontawesome-webfont.woff‘) format(‘woff‘),url(‘../fonts/fontawesome-webfont.ttf‘) format(‘truetype‘),url(‘../fonts/fontawesome-webfont.svg‘) format(‘svg‘);font-weight: normal;font-style: normal;}

 


5.需要哪一个矢量图标就在style.css 中声明就可
比如我需要该网址中的图1. 的矢量图标 fa-angellist
值需要在content 中写如 图2.红色框的内容即可；
如：

.fa-angellist:before {font-family: "fontawesome";content: "\f209";}

\

图1

图2

 


6.在页面中 HTML 中的引用例子 如：

<i class="fa fa-angellist"></i>

 

icon with jqmobi or ionic


联系
我们