【问题标题】:3 horizontal lines navicon in jquery mobilejquery mobile中的3条水平线navicon
【发布时间】:2014-06-15 17:18:16
【问题描述】:

我无法在 jquery mobile 中找到菜单导航图标(第 3 行)。

我能找到的最接近的是 ui-icon-grid。

navicon 在 jquery mobile 中是否可用,或者是否有不同的实现可用?

【问题讨论】:

  • 有人解决了您的问题吗?如果是这样,您能否接受最佳答案(单击点下的复选标记)。这将帮助遇到您的问题的其他用户快速找到接受的答案,并且还提供 15 个代表。指向作者(:

标签: javascript jquery css jquery-mobile mobile


【解决方案1】:

您可以为此使用 CSS:

没有图片:

a {
    text-decoration:none;
    font-size:50px;
    font-weight:700;
    display:inline-block;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    /* IE 9 */
    -webkit-transform:rotate(90deg);
    /* Opera, Chrome, and Safari */
    color:white; //Change the color you want for your icon
    letter-spacing:-3px;
    height:34px;
    width:34px;
}

演示:http://jsfiddle.net/lotusgodkk/x6g7S/1/

有图片:

#A_1 {
    height: 40px;
    left: 10px;
    position: absolute;
    width: 40px;
    background: rgba(0, 0, 0, 0) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC) no-repeat scroll 50% 50% / auto padding-box border-box;
    }

演示:http://jsfiddle.net/lotusgodkk/x6g7S/

【讨论】:

  • 这是图片的base64编码。
  • 我正在寻找 svg 图片
  • 好的,不使用任何图像怎么样?检查更新的答案。
【解决方案2】:

检查这个:jQuery Mobile Icons。我认为您正在寻找的是bars (ui-icon-bars)。

如果您需要更多种类的图标(字体图标),Font Awesome 可能会派上用场:Font Awesome icons。这里叫fa-bars

编辑:

正如 Cindy 指出的,某些字体图标并不总是按需要显示,因此在某些情况下使用 SVG 将是最佳选择。 Here SVG 图标和字体图标之间有一个比较,beeing 浏览器支持和文件大小是后者的主要优势。

也许这是一个最好的解决方案(我没用过,但对我来说看起来不错):IcoMoon 让您只选择您需要的图标(您也有您要求的图标)和格式你想要的(字体或SVG)。此外,您可以配置一些其他选项,例如包括 PNG,包括 SVG 精灵、尺寸、颜色...)。

【讨论】:

  • 我正在寻找菜单的 3 栏图标。
  • 是的,它叫做bars (ui-icon-bars)。检查它是否是显示在该名称下的链接中的那个,如果不是,也许您可​​以发布一张图片,以便我们准确了解您的意思。
  • 它是否取决于 jquery mobile 的版本?是否取决于浏览器的版本?
  • 我不知道在以前的版本中是否有不同的图标,或者它们的名称可能不同,就像 Font Awesome 一样。无论如何,如果这是问题,我会尝试更新项目以使用最新版本。我不认为这取决于浏览器的版本,除非您使用非常旧的版本。您更有可能有一些其他 CSS 规则阻止图标显示。
  • 太棒了,什么字体太棒了?是商业的吗?
猜你喜欢
  • 2013-03-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-10-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多