Question

我正在尝试使用html / css在句子中间实现一个图标。

尝试了一会儿，然后搜索我决定要求。

基本上我有一个基于特定条件的句子。我只是要显示条件

的结果

class SingleView(DetailView):

    def dispatch(self, request, *args, **kwargs):
    post_or_page_slug = kwargs.pop('slug')

    if Page.objects.filter(slug=post_or_page_slug).count() != 0:
        return PageDetailView.as_view()(request, *args, **kwargs)
    elif Post.objects.filter(slug=post_or_page_slug).count() != 0:
        return PostDetailView.as_view()(request, *args, **kwargs)
    else:
        raise Http404


class PageDetailView(DetailView):

    model = Page
    template_name = 'page-detail.html'


class PostDetailView(DetailView):

    model = Post
    template_name = 'post-detail.html'

使用我的CSS

%h5 {{ location.name }} <span class = "otherTest">:D</span><span class = "test"> YEAH BABY, THIS IS A PRIORITY!!!!! </span>

我有一个附加到.test{ color: #AA8D7C; } .otherTest{ background: url(/assets/icons/location.png); vertical-align: middle; height: 5px; widows: 5px; z-index: 55; } div的图标，它没有显示我现在拥有的内容。有人知道我在这里错过了什么吗？

Answer 1

您使用image作为空元素的BACKGROUND。您可以通过将元素设置为内联块并设置其尺寸来修复它。

.otherTest{
  background: url(/assets/icons/location.png);
    display:inline-block;
    width:5px;
    height:5px;

或者在我看来，更好的方法是使用 img 元素而不是span with background。例如： CSS

.otherTest{
  display:inline-block;
  height: 5px;
  width: 5px;
}

HTML

%h5 {{ location.name }} <img src="/assets/icons/location.png" class = "otherTest" alt=':D'><span class = "test"> YEAH BABY, THIS IS A PRIORITY!!!!! </span>

如何使用css / html在句子中间使用图标/图像

1 个答案: