【问题标题】:changing color of glyphicon svg from black to add a blue将 glyphicon svg 的颜色从黑色更改为添加蓝色
【发布时间】:2015-10-06 13:05:36
【问题描述】:

我知道如何更改 Bootstrap 字形图标的颜色。但是,我继承了一个 CSS 内部框架,在该框架中我尝试使用相同的原则,在该框架中我创建了一个蓝色的类,但它不起作用

我们只能选择过多地改变这个 CSS 框架,尤其是不要用 bootstrap 替换它。我想知道是否可以添加

icon-weather-blue  (does not exist , only white and black)

这里有两个现有的类

.icon-weather-white{background-image:url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2C%20ellipse%2C%20line%2C%20path%2C%20polygon%2C%20polyline%2C%20rect%2C%20text%20%7B%20fill%3A%20white%20!important%3B%20stroke%3A%20white%20!important%3B%20%7D%3C%2Fstyle%3E%3Cg%20stroke%3D%22%23363c3d%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M18.12%2053.084h28.836c2.15-.03%206.54-.804%208.957-4.326%201.433-2.068%202.047-5.79%201.116-9.112-.945-3.368-3.932-6.3-6.527-7.5.356-3.044-1.375-6.266-3.778-8.048-2.594-1.925-5.972-2.31-8.35-.993-3.45-4.036-8.09-5.866-12.485-5.367-6.71.763-11.318%205.7-11.773%2014.52C6.73%2036.4%206.47%2044.162%209.42%2048.782c1.927%203.022%205.38%204.272%208.7%204.304z%22%20stroke-width%3D%225.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13.95%2032.663c-6.24-1.672-9.943-8.085-8.27-14.325%201.67-6.24%208.084-9.942%2014.324-8.27%203.658.98%206.616%203.67%207.936%207.22l-10.963%204.077z%22%20stroke-width%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat:no-repeat}

.icon-weather{background-image:url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%3E%3Cg%20stroke%3D%22%23363c3d%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M18.12%2053.084h28.836c2.15-.03%206.54-.804%208.957-4.326%201.433-2.068%202.047-5.79%201.116-9.112-.945-3.368-3.932-6.3-6.527-7.5.356-3.044-1.375-6.266-3.778-8.048-2.594-1.925-5.972-2.31-8.35-.993-3.45-4.036-8.09-5.866-12.485-5.367-6.71.763-11.318%205.7-11.773%2014.52C6.73%2036.4%206.47%2044.162%209.42%2048.782c1.927%203.022%205.38%204.272%208.7%204.304z%22%20stroke-width%3D%225.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13.95%2032.663c-6.24-1.672-9.943-8.085-8.27-14.325%201.67-6.24%208.084-9.942%2014.324-8.27%203.658.98%206.616%203.67%207.936%207.22l-10.963%204.077z%22%20stroke-width%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat:no-repeat}

【问题讨论】:

    标签: css twitter-bootstrap svg glyphicons


    【解决方案1】:

    您可以在此处的 URI(使用 .icon-weather 示例)中找到笔触颜色:stroke%3D%22%23363c3d%22%3D 是 =,%22 是 ",%23 是 #,所以这个字符串可以读作stroke="#363c3d"。所以只改变这部分:363c3d 会改变笔画颜色。见example

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-10-26
      • 1970-01-01
      • 2020-04-03
      • 1970-01-01
      • 2018-02-16
      相关资源
      最近更新 更多