小编sdv*_*ksv的帖子

我想使用字体真棒图标作为CSS内容,即,

a:before {
    content: "<i class='fa...'>...</i>";
}

我知道我不能使用HTML代码content,所以它只剩下图像吗？

下面的代码将在<a>元素正下方创建一个箭头:

的jsfiddle

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}
.btn:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 10px 50px 0 50px;
    border-style: solid;
    border-color: gray transparent transparent transparent;   
}

<a href="#" class="btn">Hello!</a>

问题是我们必须指示链接宽度以获得适当大小的箭头,因为我们无法以像素为单位指示边框宽度.

如何制作响应三角形百分比？

我有一个用作背景的内联 SVG 图像，下面是一个简化的示例：

div {
  width: 100%; height: 500px;
  color: green;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><path d='M0 0 H 100 V 100 H 0 Z' fill='currentColor'></path></svg>");
}

https://jsfiddle.net/wjqkL07p/3/

问题是图像没有继承 currentColor 并且在我预期它是绿色时是黑色的。任何的想法？

我试图在一个::before伪元素中插入一个FontAwesome图标attr().原始代码更复杂,但是这会让你知道我想要什么:

<div data-background-icon="\f086"></div>

div::before {
  content: attr(data-background-icon);
  font-family: "FontAwesome";
}

https://jsfiddle.net/grutcop8/

它不起作用,而嵌入它的通常方法工作正常:

div::before {
  content: "\f086";
  font-family: "FontAwesome";
}

我错过了什么？

我在Browserstack上使用带有iOS 8.3的iPhone 6模拟器,我需要检查我正在浏览的网站的源代码.

如何在Browserstack上的iOS模拟器中打开开发人员工具？

所以我有一个主页面(a)和一个预览页面(b)通过iframe嵌入主页面.页面(b)触发特殊事件:

$(document).trigger('preview.compiled');

现在我希望主页面(a)收听此事件并执行以下操作:

$('iframe').contents().on('preview.compiled', function() {
    console.log('Success');
});

但是,上面的代码不起作用.有任何想法吗？

使用是否有任何主要优点:

background-color: rgba(0,0,0,0);

代替:

background-color: transparent;

？

我正在测试我的HTML代码标记是否符合可访问性标准：http : //achecker.ca/checker/index.php。以下是我得到的错误：

修复：将您的i元素替换为em或strong。

<i class="fa fa-search" title="Search"></i> <span class="sr-only">Search</span>

我浏览了有关可访问性的官方Font Awesome文档（https://cdn.fontawesome.com/help#qa-autoa11y），但没有发现我需要为图标使用不同标签的任何提示。有什么想法吗？

我尝试使用此代码在旋转木马滑动时触发事件,但由于某种原因它无法工作.有什么建议？

var $carousel = $('#carousel-showcase');
$carousel.carousel();

$carousel.bind('slide', function(e) {

  setTimeout( function(){
    var left = $carousel.find('.item.active.left');
    var right = $carousel.find('.item.active.right');
    if(left.length > 0) {
    $("#wrap").animate({
        backgroundPositionX: '+=50%'
    },0);
    }
    else if(right.length > 0) {
    $("#wrap").animate({
        backgroundPositionX: '-=50%'
    },0);
    }
  }, 500);
});

我有一个简单的圆形容器:

.foo {
  width: 5px;
  height: 5px;
  background-color: green;
  border-radius: 50%;
}

当我尝试使用以下方法扩展其大小时:

.foo {
  -webkit-transform: scale(10,10);
          transform: scale(10,10);
}

它看起来不再那么圆了.看起来它的border-radius得到一个等于原始边界半径的值,以像素为单位乘以比例值.

https://jsfiddle.net/h70wsqrv/1/

任何想法如何解决它？

更新:似乎问题只发生在Chrome中.Firefox显示了一个完美的圆圈.