【问题标题】:Using jQuery to render a random font-awesome icon (random string from a list)?使用 jQuery 渲染一个随机字体真棒图标(列表中的随机字符串)?
【发布时间】:2013-10-19 19:14:00
【问题描述】:

我正在网页上的多个位置生成一个随机图标。为了设置这些图标的样式,我使用Font Awesome 作为列表。查看该链接,您可以看到每个图标都由一个样式为 <i class="icon-[some-string]"></i> 的类表示

目标是能够在页面上放置代码,然后使用 jQuery 用该列表中的选项填充 [some-string]。所以一些伪示例,例如:

<ul class="random-list">
  [for i]
    <li class="list-item"><i class="icon-string"></i></li>
    // Other content
  [end]
</ul>

然后我会使用 jQuery 从选项列表中更改字符串。我只是不知道如何做到这一点,如何创建对象数组,或者如何操作动态添加的项目。由于它们像上面的示例一样动态添加,我想我应该在它们生成时进行字符串替换,而不是在页面加载后这样做?这样做的过程是什么?我正在使用一个正在加载一些块的模板,我想在每个块之前包含随机图标。或者,如果更简单,我可以在每个块之前添加一个随机图标,但是,由于它们是由模板动态生成的,这会带来它自己的问题。

1) 如何实现示例中的随机图标(基于模板) 2) 或者,如果事后这样做更容易,我如何在每个块前添加一个随机图标?

对于这个问题,任何一个答案都可以。

【问题讨论】:

    标签: javascript jquery twitter-bootstrap font-awesome


    【解决方案1】:
    $(document).ready(function() {
        var iconArray = new Array(
            "icon-compass",
          "icon-collapse",
          "icon-collapse-top",
          "icon-expand",
          "icon-eur",
          "icon-euro",
          "icon-gbp",
          "icon-usd",
          "icon-dollar",
          "icon-inr",
          "icon-rupee",
          "icon-jpy",
          "icon-yen",
          "icon-cny",
          "icon-renminbi",
          "icon-krw",
          "icon-won",
          "icon-btc",
          "icon-bitcoin",
          "icon-file",
          "icon-file-text",
          "icon-sort-by-alphabet",
          "icon-sort-by-alphabet-alt",
          "icon-sort-by-attributes",
          "icon-sort-by-attributes-alt",
          "icon-sort-by-order",
          "icon-sort-by-order-alt",
          "icon-thumbs-up",
          "icon-thumbs-down",
          "icon-youtube-sign",
          "icon-youtube",
          "icon-xing",
          "icon-xing-sign",
          "icon-youtube-play",
          "icon-dropbox",
          "icon-stackexchange",
          "icon-instagram",
          "icon-flickr",
          "icon-adn",
          "icon-bitbucket",
          "icon-bitbucket-sign",
          "icon-tumblr",
          "icon-tumblr-sign",
          "icon-long-arrow-down",
          "icon-long-arrow-up",
          "icon-long-arrow-left",
          "icon-long-arrow-right",
          "icon-apple",
          "icon-windows",
          "icon-android",
          "icon-linux",
          "icon-dribbble",
          "icon-skype",
          "icon-foursquare",
          "icon-trello",
          "icon-female",
          "icon-male",
          "icon-gittip",
          "icon-sun",
          "icon-moon",
          "icon-archive",
          "icon-bug",
          "icon-vk",
          "icon-weibo",
          "icon-renren",
          "icon-adjust",
          "icon-anchor",
          "icon-archive",
          "icon-asterisk",
          "icon-ban-circle",
          "icon-bar-chart",
          "icon-barcode",
          "icon-beaker",
          "icon-beer",
          "icon-bell",
          "icon-bell-alt",
          "icon-bolt",
          "icon-book",
          "icon-bookmark",
          "icon-bookmark-empty",
          "icon-briefcase",
          "icon-bug",
          "icon-building",
          "icon-bullhorn",
          "icon-bullseye",
          "icon-calendar",
          "icon-calendar-empty",
          "icon-camera",
          "icon-camera-retro",
          "icon-certificate",
          "icon-check",
          "icon-check-empty",
          "icon-check-minus",
          "icon-check-sign",
          "icon-circle",
          "icon-circle-blank",
          "icon-cloud",
          "icon-cloud-download",
          "icon-cloud-upload",
          "icon-code",
          "icon-code-fork",
          "icon-coffee",
          "icon-cog",
          "icon-cogs",
          "icon-collapse",
          "icon-collapse-alt",
          "icon-collapse-top",
          "icon-comment",
          "icon-comment-alt",
          "icon-comments",
          "icon-comments-alt",
          "icon-compass",
          "icon-credit-card",
          "icon-crop",
          "icon-dashboard",
          "icon-desktop",
          "icon-download",
          "icon-download-alt",
          "icon-edit",
          "icon-edit-sign",
          "icon-ellipsis-horizontal",
          "icon-ellipsis-vertical",
          "icon-envelope",
          "icon-envelope-alt",
          "icon-eraser",
          "icon-exchange",
          "icon-exclamation",
          "icon-exclamation-sign",
          "icon-expand",
          "icon-expand-alt",
          "icon-external-link",
          "icon-external-link-sign",
          "icon-eye-close",
          "icon-eye-open",
          "icon-facetime-video",
          "icon-female",
          "icon-fighter-jet",
          "icon-film",
          "icon-filter",
          "icon-fire",
          "icon-fire-extinguisher",
          "icon-flag",
          "icon-flag-alt",
          "icon-flag-checkered",
          "icon-folder-close",
          "icon-folder-close-alt",
          "icon-folder-open",
          "icon-folder-open-alt",
          "icon-food",
          "icon-frown",
          "icon-gamepad",
          "icon-gear",
          "icon-gears",
          "icon-gift",
          "icon-glass",
          "icon-globe",
          "icon-group",
          "icon-hdd",
          "icon-headphones",
          "icon-heart",
          "icon-heart-empty",
          "icon-home",
          "icon-inbox",
          "icon-info",
          "icon-info-sign",
          "icon-key",
          "icon-keyboard",
          "icon-laptop",
          "icon-leaf",
          "icon-legal",
          "icon-lemon",
          "icon-level-down",
          "icon-level-up",
          "icon-lightbulb",
          "icon-location-arrow",
          "icon-lock",
          "icon-magic",
          "icon-magnet",
          "icon-mail-forward",
          "icon-mail-reply",
          "icon-mail-reply-all",
          "icon-male",
          "icon-map-marker",
          "icon-meh",
          "icon-microphone",
          "icon-microphone-off",
          "icon-minus",
          "icon-minus-sign",
          "icon-minus-sign-alt",
          "icon-mobile-phone",
          "icon-money",
          "icon-moon",
          "icon-move",
          "icon-music",
          "icon-off",
          "icon-ok",
          "icon-ok-circle",
          "icon-ok-sign",
          "icon-pencil",
          "icon-phone",
          "icon-phone-sign",
          "icon-picture",
          "icon-plane",
          "icon-plus",
          "icon-plus-sign",
          "icon-plus-sign-alt",
          "icon-power-off",
          "icon-print",
          "icon-pushpin",
          "icon-puzzle-piece",
          "icon-qrcode",
          "icon-question",
          "icon-question-sign",
          "icon-quote-left",
          "icon-quote-right",
          "icon-random",
          "icon-refresh",
          "icon-remove",
          "icon-remove-circle",
          "icon-remove-sign",
          "icon-reorder",
          "icon-reply",
          "icon-reply-all",
          "icon-resize-horizontal",
          "icon-resize-vertical",
          "icon-retweet",
          "icon-road",
          "icon-rocket",
          "icon-rss",
          "icon-rss-sign",
          "icon-screenshot",
          "icon-search",
          "icon-share",
          "icon-share-alt",
          "icon-share-sign",
          "icon-shield",
          "icon-shopping-cart",
          "icon-sign-blank",
          "icon-signal",
          "icon-signin",
          "icon-signout",
          "icon-sitemap",
          "icon-smile",
          "icon-sort",
          "icon-sort-by-alphabet",
          "icon-sort-by-alphabet-alt",
          "icon-sort-by-attributes",
          "icon-sort-by-attributes-alt",
          "icon-sort-by-order",
          "icon-sort-by-order-alt",
          "icon-sort-down",
          "icon-sort-up",
          "icon-spinner",
          "icon-star",
          "icon-star-empty",
          "icon-star-half",
          "icon-star-half-empty",
          "icon-star-half-full",
          "icon-subscript",
          "icon-suitcase",
          "icon-sun",
          "icon-superscript",
          "icon-tablet",
          "icon-tag",
          "icon-tags",
          "icon-tasks",
          "icon-terminal",
          "icon-thumbs-down",
          "icon-thumbs-down-alt",
          "icon-thumbs-up",
          "icon-thumbs-up-alt",
          "icon-ticket",
          "icon-time",
          "icon-tint",
          "icon-trash",
          "icon-trophy",
          "icon-truck",
          "icon-umbrella",
          "icon-unchecked",
          "icon-unlock",
          "icon-unlock-alt",
          "icon-upload",
          "icon-upload-alt",
          "icon-user",
          "icon-volume-down",
          "icon-volume-off",
          "icon-volume-up",
          "icon-warning-sign",
          "icon-wrench",
          "icon-zoom-in",
          "icon-zoom-out",
          "icon-bitcoin",
          "icon-btc",
          "icon-cny",
          "icon-dollar",
          "icon-eur",
          "icon-euro",
          "icon-gbp",
          "icon-inr",
          "icon-jpy",
          "icon-krw",
          "icon-renminbi",
          "icon-rupee",
          "icon-usd",
          "icon-won",
          "icon-yen",
          "icon-align-center",
          "icon-align-justify",
          "icon-align-left",
          "icon-align-right",
          "icon-bold",
          "icon-columns",
          "icon-copy",
          "icon-cut",
          "icon-eraser",
          "icon-file",
          "icon-file-alt",
          "icon-file-text",
          "icon-file-text-alt",
          "icon-font",
          "icon-indent-left",
          "icon-indent-right",
          "icon-italic",
          "icon-link",
          "icon-list",
          "icon-list-alt",
          "icon-list-ol",
          "icon-list-ul",
          "icon-paper-clip",
          "icon-paperclip",
          "icon-paste",
          "icon-repeat",
          "icon-rotate-left",
          "icon-rotate-right",
          "icon-save",
          "icon-strikethrough",
          "icon-table",
          "icon-text-height",
          "icon-text-width",
          "icon-th",
          "icon-th-large",
          "icon-th-list",
          "icon-underline",
          "icon-undo",
          "icon-unlink",
          "icon-angle-down",
          "icon-angle-left",
          "icon-angle-right",
          "icon-angle-up",
          "icon-arrow-down",
          "icon-arrow-left",
          "icon-arrow-right",
          "icon-arrow-up",
          "icon-caret-down",
          "icon-caret-left",
          "icon-caret-right",
          "icon-caret-up",
          "icon-chevron-down",
          "icon-chevron-left",
          "icon-chevron-right",
          "icon-chevron-sign-down",
          "icon-chevron-sign-left",
          "icon-chevron-sign-right",
          "icon-chevron-sign-up",
          "icon-chevron-up",
          "icon-circle-arrow-down",
          "icon-circle-arrow-left",
          "icon-circle-arrow-right",
          "icon-circle-arrow-up",
          "icon-double-angle-down",
          "icon-double-angle-left",
          "icon-double-angle-right",
          "icon-double-angle-up",
          "icon-hand-down",
          "icon-hand-left",
          "icon-hand-right",
          "icon-hand-up",
          "icon-long-arrow-down",
          "icon-long-arrow-left",
          "icon-long-arrow-right",
          "icon-long-arrow-up",
          "icon-backward",
          "icon-eject",
          "icon-fast-backward",
          "icon-fast-forward",
          "icon-forward",
          "icon-fullscreen",
          "icon-pause",
          "icon-play",
          "icon-play-circle",
          "icon-play-sign",
          "icon-resize-full",
          "icon-resize-small",
          "icon-step-backward",
          "icon-step-forward",
          "icon-stop",
          "icon-youtube-play",
          "icon-ambulance",
          "icon-h-sign",
          "icon-hospital",
          "icon-medkit",
          "icon-plus-sign-alt",
          "icon-stethoscope",
          "icon-user-md"
        );
        var randIcon = Math.floor(Math.random()*(iconArray.length));
        $('.icon-front').append("<i class='" + iconArray[randIcon] + "'></i>");
        console.log(randIcon);
    });
    

    似乎可以解决问题,但是,让它在动态元素上工作将需要延迟或其他东西,除非我能确定这个 sn-p 在元素创建模板中运行...

    【讨论】:

      【解决方案2】:

      更新到最近的 Font Awesome 选择器标签:

      $(文档).ready(函数() { var iconArray = new Array("glass"、"music"、"search"、"envelope-o"、"heart"、"star"、"star-o"、"user"、"film"、"th-large ", "th", "th-list", "check", "remove", "close", "times", "search-plus", "search-minus", "power-off", "signal", “gear”、“cog”、“trash-o”、“home”、“file-o”、“clock-o”、“road”、“下载”、“arrow-circle-o-down”、“arrow -circle-o-up", "inbox", "play-circle-o", "rotate-right", "repeat", "refresh", "list-alt", "lock", "flag", "headphones ", "关闭音量", "减小音量", "增大音量", "二维码", "条形码", "标签", "标签", "书", "书签", "打印", "相机", "font", "bold", "italic", "text-height", "text-width", "align-left", "align-center", "align-right", "align-justify", “列表”,“凹痕”,“凹痕”,“缩进”,“摄像机”,“照片”,“图像”,“图片-o”,“铅笔”,“地图标记”,“调整”, “tint”、“edit”、“pencil-square-o”、“share-square-o”、“check-square-o”、“箭头”、“step-backward”、“fast-backward”、“backward” ”、“播放”、“暂停”、“停止”、“前进”、“快进”、“前进” d", "eject", "chevron-left", "chevron-right", "plus-circle", "minus-circle", "times-circle", "check-circle", "question-circle", " info-circle", "crosshairs", "times-circle-o", "check-circle-o", "ban", "arrow-left", "arrow-right", "arrow-up", "arrow-向下”、“邮件转发”、“分享”、“展开”、“压缩”、“加号”、“减号”、“星号”、“感叹号”、“礼物”、“叶子”、“火” ,“眼睛”,“眼睛斜线”,“警告”,“感叹号三角形”,“平面”,“日历”,“随机”,“评论”,“磁铁”,“雪佛龙向上”,“雪佛龙-向下”、“转推”、“购物车”、“文件夹”、“文件夹打开”、“箭头-v”、“箭头-h”、“条形图-o”、“条形图”、“ twitter-square"、"facebook-square"、"camera-retro"、"key"、"gears"、"cogs"、"cmets"、"thumbs-o-up"、"thumbs-o-down"、" star-half”, “heart-o”, “sign-out”, “linkedin-square”, “thumb-tack”, “external-link”, “sign-in”, “trophy”, “github-square” , “上传”, “柠檬-o”, “电话”, “square-o”, “书签-o”, “phone-square”, “twitter”, “facebook-f”, “facebook”, “github” , "解锁", "信用证rd”、“rss”、“hdd-o”、“扩音器”、“铃铛”、“证书”、“hand-o-right”、“hand-o-left”、“hand-o-up”、“ hand-o-down”、“arrow-circle-left”、“arrow-circle-right”、“arrow-circle-up”、“arrow-circle-down”、“globe”、“wrench”、“tasks” ,“过滤器”,“公文包”,“箭头-alt”,“组”,“用户”,“链”,“链接”,“云”,“烧瓶”,“剪切”,“剪刀”,“复制” , "files-o", "paperclip", "save", "floppy-o", "square", "navicon", "reorder", "bars", "list-ul", "list-ol", "删除线”、“下划线”、“表格”、“魔术”、“卡车”、“pinterest”、“pinterest-square”、“google-plus-square”、“google-plus”、“money”、“caret-向下”,“插入符号”,“插入符号左”,“插入符号右”,“列”,“未排序”,“排序”,“向下排序”,“排序降序”,“向上排序” , “sort-asc”, “envelope”, “linkedin”, “rotate-left”, “undo”, “legal”, “gavel”, “dashboard”, “tachometer”, “comment-o”, “cmets- o”、“flash”、“bolt”、“站点地图”、“伞”、“粘贴”、“剪贴板”、“灯泡-o”、“交换”、“云下载”、“云上传”、“ user-md", "听诊器", "手提箱", "be ll-o”、“咖啡”、“餐具”、“file-text-o”、“building-o”、“hospital-o”、“救护车”、“medkit”、“战斗机”、“啤酒” , “h-square”, “plus-square”, “angle-double-left”, “angle-double-right”, “angle-double-up”, “angle-double-down”, “angle-left” , “角度右”, “角度向上”, “角度向下”, “台式机”, “笔记本电脑”, “平板电脑”, “手机”, “手机”, “圆圈-o”, “报价- left", "quote-right", "spinner", "circle", "mail-reply", "reply", "github-alt", "folder-o", "folder-open-o", "smile- o", "frown-o", "meh-o", "gamepad", "keyboard-o", "flag-o", "flag-checkered", "terminal", "code", "mail-reply-全部”、“全部回复”、“星号半空”、“星号半满”、“星号半-o”、“位置箭头”、“裁剪”、“代码叉”、“取消链接”、“断链”、“问题”、“信息”、“感叹号”、“上标”、“下标”、“橡皮擦”、“拼图”、“麦克风”、“麦克风斜线”、“盾牌”、“日历-o”、“灭火器”、“火箭”、“maxcdn”、“人字形-左”、“人字形-右”、“人字形-上”、“人字形-向下圈", "h tml5", "css3", "anchor", "unlock-alt", "bullseye", "ellipsis-h", "ellipsis-v", "rss-square", "play-circle", "ticket", "负方”、“负方-o”、“升级”、“降级”、“检查方”、“铅笔方”、“外部链接方”、“共享方” ,“指南针”,“向下切换”,“插入符号-o-向下”,“向上切换”,“插入符号-向上”,“向右切换”,“插入-方形-o-对”、“欧元”、“欧元”、“英镑”、“美元”、“美元”、“卢比”、“印度卢比”、“人民币”、“人民币”、“日元”、“日元”、“卢布” , "卢布", "rub", "won", "krw", "bitcoin", "btc", "file", "file-text", "sort-alpha-asc", "sort-alpha-desc" , “排序-数量-asc”, “排序-数量-desc”, “排序-数字-asc”, “排序-数字-desc”, “拇指向上”, “拇指向下”, “youtube-square” 、“youtube”、“xing”、“xing-square”、“youtube-play”、“dropbox”、“stack-overflow”、“instagram”、“flickr”、“adn”、“bitbucket”、“bitbucket-正方形”、“tumblr”、“tumblr-square”、“长箭头向下”、“长箭头向上”、“长箭头左”、“长箭头右”、“苹果”、“ windows”、“android”、“linux”、“dribbble”、“skyp” e”、“foursquare”、“trello”、“female”、“male”、“gittip”、“gratipay”、“sun-o”、“moon-o”、“archive”、“bug”、“vk” , "weibo", "renren", "pagelines", "stack-exchange", "arrow-circle-o-right", "arrow-circle-o-left", "toggle-left", "caret-square- o-left”、“dot-circle-o”、“轮椅”、“vimeo-square”、“turkish-lira”、“try”、“plus-square-o”、“航天飞机”、“slack” ,“信封广场”,“wordpress”,“openid”,“机构”,“银行”,“大学”,“砂浆板”,“毕业帽”,“雅虎”,“谷歌”,“reddit” ,“reddit-square”,“stumbleupon-circle”,“stumbleupon”,“美味”,“digg”,“pied-piper”,“pied-piper-alt”,“drupal”,“joomla”,“语言” ,“传真”,“建筑”,“孩子”,“爪子”,“勺子”,“立方体”,“立方体”,“behance”,“behance-square”,“steam”,“steam-square”,“回收”、“汽车”、“汽车”、“出租车”、“出租车”、“树”、“spotify”、“deviantart”、“soundcloud”、“数据库”、“file-pdf-o”、“file- word-o”、“file-excel-o”、“file-powerpoint-o”、“file-photo-o”、“file-picture-o”、“file-image-o”、“file-zip- o", "文件拱ive-o”、“file-sound-o”、“file-audio-o”、“file-movie-o”、“file-video-o”、“file-code-o”、“vine”、“ codepen”、“jsfiddle”、“life-bouy”、“life-buoy”、“life-saver”、“support”、“life-ring”、“circle-o-notch”、“ra”、“rebel” , “ge”, “empire”, “git-square”, “git”, “hacker-news”, “tencent-weibo”, “qq”, “wechat”, “weixin”, “send”, “paper-飞机”,“发送-o”,“纸飞机-o”,“历史”,“无性别”,“圈薄”,“标题”,“段落”,“滑块”,“共享替代”,“ share-alt-square”、“bomb”、“soccer-ball-o”、“futbol-o”、“tty”、“双筒望远镜”、“plug”、“slideshare”、“twitch”、“yelp”、“报纸-o"、"wifi"、"计算器"、"paypal"、"google-wallet"、"cc-visa"、"cc-mastercard"、"cc-discover"、"cc-amex"、"cc- paypal”、“cc-stripe”、“bell-slash”、“bell-slash-o”、“垃圾”、“版权”、“at”、“吸管”、“画笔”、“生日蛋糕” ,“面积图”,“饼图”,“折线图”,“lastfm”,“lastfm-square”,“toggle-off”,“toggle-on”,“bicycle”,“bus”,“ ioxhost”、“angellist”、“cc”、“shekel”、“sheqel”、“ils”、“meanpath”、“购买” ellads”、“connectdevelop”、“dashcube”、“forumbee”、“leanpub”、“sellsy”、“shirtsinbulk”、“simplybuilt”、“skyatlas”、“cart-plus”、“cart-arrow-down”、“钻石”、“船”、“用户机密”、“摩托车”、“街景”、“心跳”、“金星”、“火星”、“水星”、“变性人”、“变性人-alt”、“ venus-double”、“mars-double”、“venus-mars”、“mars-stroke”、“mars-stroke-v”、“mars-stroke-h”、“neuter”、“facebook-official”、“ pinterest-p”、“whatsapp”、“server”、“user-plus”、“user-times”、“hotel”、“bed”、“viacoin”、“train”、“subway”、“medium”); var randIcon = Math.floor(Math.random()*(iconArray.length)); $('.icon-front').append(""); 控制台.log(randIcon); });

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2013-05-13
        • 2013-02-09
        • 2021-12-13
        • 1970-01-01
        • 1970-01-01
        • 2016-06-21
        • 1970-01-01
        • 2017-05-20
        相关资源
        最近更新 更多