前端开发项目符号素材下载和添加方法
素材下载 2014-10-09 2871 2 评论 admin

在建站时,特别是在前端开发的时候,为了网页的美观,需要在某些地方加入一些项目符号,如图:
项目符号素材
下面给大家分享一些项目符号的添加方法。希望对大家有些帮助。

1、首先下载项目符号文件,直接解压到主题目录中的images文件夹里面。

下载地址:http://pan.baidu.com/s/1gdekI3L

2、css调用

1
<link rel="stylesheet" id="font-awesome-css" href="这里填写主题路径/images/font-awesome.css" type="text/css" media="all">

3、在需要添加项目符号的地方添加以下代码:

1
<i class="fa fa-glass"></i>

其中glass是项目符号的名称,不同的名称代表着不同的符号,下面给大家准备了一份项目符号与名称对照表,大家只需要替换适合自己的项目符号的名称即可。
glassmusicsearchenvelope-oheartstarstar-ouserfilmth-largethth-listcheckremoveclosetimessearch-plussearch-minuspower-offsignalgearcogtrash-ohomefile-oclock-oroaddownloadarrow-circle-o-downarrow-circle-o-upinboxplay-circle-orotate-rightrepeatrefreshlist-altlockflagheadphonesvolume-offvolume-downvolume-upqrcodebarcodetagtagsbookbookmarkprintcamerafontbolditalictext-heighttext-widthalign-leftalign-centeralign-rightalign-justifylistdedentoutdentindentvideo-cameraphotoimagepicture-opencilmap-markeradjusttinteditpencil-square-oshare-square-ocheck-square-oarrowsstep-backwardfast-backwardbackwardplaypausestopforwardfast-forwardstep-forwardejectchevron-leftchevron-rightplus-circleminus-circletimes-circlecheck-circlequestion-circleinfo-circlecrosshairstimes-circle-ocheck-circle-obanarrow-leftarrow-rightarrow-uparrow-downmail-forwardshareexpandcompressplusminusasteriskexclamation-circlegiftleaffireeyeeye-slashwarningexclamation-triangleplanecalendarrandomcommentmagnetchevron-upchevron-downretweetshopping-cartfolderfolder-openarrows-varrows-hbar-chart-obar-charttwitter-squarefacebook-squarecamera-retrokeygearscogscommentsthumbs-o-upthumbs-o-downstar-halfheart-osign-outlinkedin-squarethumb-tackexternal-linktrophygithub-squareuploadlemon-ophonesquare-obookmark-ophone-squaretwitterfacebookgithubunlockcredit-cardrsshdd-obullhornbellcertificatehand-o-righthand-o-lefthand-o-uphand-o-downarrow-circle-leftarrow-circle-rightarrow-circle-uparrow-circle-downglobewrenchtasksfilterbriefcasearrows-altgroupuserschainlinkcloudflaskcutscissorscopyfiles-opaperclipsavefloppy-osquarenaviconreorderbarslist-ullist-olstrikethroughunderlinetablemagictruckpinterestpinterest-squaregoogle-plus-squaregoogle-plusmoneycaret-downcaret-upcaret-leftcaret-rightcolumnsunsortedsortsort-downsort-descsort-upsort-ascenvelopeenveloperotate-leftundolegalgaveldashboardtachometercomment-ocomments-oflashboltsitemapumbrellapasteclipboardlightbulb-oexchangecloud-downloadcloud-uploaduser-mdstethoscopesuitcasebell-ocoffeecutleryfile-text-obuilding-ohospital-oambulancemedkitfighter-jetbeerh-squareplus-squareangle-double-leftangle-double-rightangle-double-uangle-double-downangle-leftangle-rightangle-upangle-downdesktoplaptoptabletmobile-phonemobilecircle-oquote-leftquote-rightspinnercirclemail-replyreplygithub-altfolder-ofolder-open-osmile-ofrown-omeh-ogamepadkeyboard-oflag-oflag-checkeredterminalcodemail-reply-allreply-allstar-half-emptystar-half-fullstar-half-olocation-arrowcropcode-forkunlinkchain-brokenquestioninfoexclamationsuperscriptsubscripteraserpuzzle-piecemicrophonemicrophone-slashshieldcalendar-ofire-extinguisherrocketmaxcdnchevron-circle-leftchevron-circle-rightchevron-circle-upchevron-circle-downhtml5css3anchorunlock-altbullseyeellipsis-hellipsis-vrss-squareplay-circleticketminus-squareminus-square-olevel-uplevel-downcheck-squarepencil-squareexternal-link-squareshare-squarecompasstoggle-downcaret-square-o-downtoggle-upcaret-square-o-uptoggle-rightcaret-square-o-righteuroeurgbpdollarusdrupeeinrcnyrmbyenjpyrubleroublerubwonkrwbitcoinbtcfilefile-textsort-alpha-ascsort-alpha-descsort-amount-ascsort-amount-descsort-numeric-ascsort-numeric-descthumbs-upthumbs-downyoutube-squareyoutubexingxing-squareyoutube-playdropboxstack-overflowinstagramflickradnbitbucketbitbucket-squaretumblrtumblr-squarelong-arrow-downlong-arrow-uplong-arrow-leftlong-arrow-rightapplewindowsandroidlinuxdribbbleskypefoursquaretrellofemalemalegittipsun-omoon-oarchivebugvkweiborenrenpagelinesstack-exchangearrow-circle-o-rightarrow-circle-o-lefttoggle-leftcaret-square-o-leftdot-circle-owheelchairvimeo-squareturkish-liratryplus-square-ospace-shuttleslackenvelope-squarewordpressopenidinstitutionbankuniversitymortar-boardgraduation-capyahoogoogleredditreddit-squarestumbleupon-circlestumbleupondeliciousdiggpied-piperpied-piper-altdrupaljoomlalanguagefaxbuildingchildpawspooncubecubesbehancebehance-squaresteamsteam-squarerecycleautomobilecarcabtaxitreespotifydeviantartsoundclouddatabasefile-pdf-ofile-word-ofile-excel-ofile-powerpoint-ofile-photo-ofile-picture-ofile-image-ofile-zip-ofile-archive-ofile-sound-ofile-audio-ofile-movie-ofile-video-ofile-code-ovinecodepenjsfiddlelife-bouylife-buoylife-saversupportlife-ringcircle-o-notchrarebelgeempiregit-squaregithacker-newstencent-weiboqqwechatweixinsendpaper-planesend-opaper-plane-ohistorycircle-thinheaderparagraphslidersshare-altshare-alt-squarebombsoccer-ball-ofutbol-ottybinocularsplugslidesharetwitchyelpnewspaper-owificalculatorpaypalgoogle-walletcc-visacc-mastercardcc-discovercc-amexcc-paypalcc-stripebell-slashbell-slash-otrashcopyrightateyedropperpaint-brushbirthday-cakearea-chartpie-chartline-chartlastfmlastfm-squaretoggle-offtoggle-onbicyclebusioxhostangellistccshekelsheqelilsmeanpath

继续浏览有关: , , 的文章
版权声明:版权归 wp仿站之家 所有,转载请注明出处!
转载请保留链接: http://www.linw.net/235.html

用心做最好的主题网站wp仿站之家

wp仿站之家是一个专业的wordpress仿站业务网站,提供wordpress主题模板下载以及seo网站优化服务,诚信经营,用心服务每一个客户,让您放心享受我们的优质服务。同时,也欢迎各位建站爱好者加入我们交流建站经验心得。

上一篇: 下一篇:

2则回应给“前端开发项目符号素材下载和添加方法”

  1. 前端小白说道:

    这个很实用呀,我之前也用过,但都是逐个试的,从来没想过要这么整理出来,以后对着图标套class名就可以了,楼主辛苦了。

发表评论