glyphicons 相关问题

我将以下 SVG 图标作为路径嵌入到我的 HTML 页面中：我将以下 SVG 图标作为 path 嵌入到我的 HTML 页面中： <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg> 如何将上述 SVG 图标 path 作为 class 包含在 CSS 中？所以我可以在我的 HTML 页面中将它用作 attribute，如下所示： <i class="chevron-right"></i> 更新：关于已接受的答案，我在使图标正确垂直居中时遇到了一些问题，最终找到了一个更简单的 CSS 代码： .chevron-right { vertical-align: middle; content: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } 将其用作背景： .chevron-right { display: inline-block; width: 1rem; aspect-ratio: 1; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>') 0 0/contain no-repeat; } <i class="chevron-right"></i> <i class="chevron-right" style="width:2rem"></i> <i class="chevron-right" style="width:4rem"></i> 如果您想要着色，请考虑面膜： .chevron-right { display: inline-block; width: 1rem; aspect-ratio: 1; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>') 0 0/contain; background: currentColor; } <i class="chevron-right"></i> <i class="chevron-right" style="width:2rem;color:red;"></i> <i class="chevron-right" style="width:4rem;color:blue;"></i> 创建自定义元素：<svg-icon path="your d path"></svg-icon> <style> svg-icon svg { width: 80px; height:80px; background: grey; } </style> <svg-icon path="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></svg-icon> <script> customElements.define("svg-icon", class extends HTMLElement { connectedCallback() { this.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="${this.getAttribute("path")}"/></svg>`; } }); </script> 如果您需要图标，请参阅我的宠物项目IconMeister.github.io

css svg icons glyphicons

回答 2 投票 0

如何仅使用引导图标？

我有一个带有自己的css文件的项目。现在我想使用一些图标。 Bootstrap 图标是一个不错的选择。但是，我只需要图标。我不需要任何其他东西。我进入自定义页面自定义我的

css twitter-bootstrap twitter-bootstrap-3 glyphicons

回答 4 投票 0

Safari 文本阴影错误？

我遇到一个问题，Safari 无法像 chrome 或 ff 那样在自定义字形图标上渲染完整的文本阴影。我附上按钮的图像。你知道是否有任何已知的错误或任何...

safari glyphicons css

回答 2 投票 0

Glyphicon 在 Prestashop 1.6 中不显示

我正在开发一个 prestashop 模块，我试图在我的模板中使用 Boostrap glyphicon 作为按钮，但它不起作用，我不明白为什么。我正在开发 prestashop 模块，并且尝试在我的模板中使用 Boostrap glyphicon 作为按钮，但它不起作用，我不明白为什么。 <td> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-cloud-download"></span> </button> </td> 我的专栏保持空白，prestashop 文档显示了这个示例，但它也不起作用 <div class="form-group has-warning"> <label class="control-label" for="input1">Label with warning</label> <input type="text" class="form-control" id="input1"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> 需要添加到 prestashop 中吗？我是不是错过了什么？这取决于您需要的按钮，例如，如果它是您可以使用的“面板页脚”按钮： <button type="submit" class="btn btn-default pull-right" name="submitTest"><i class="process-icon-download"></i> Download</button> 或链接按钮： <a href="#" title="Download" class="btn btn-default"> <i class="icon-cloud-download"></i> Download </a> 在默认引导主题中，prestashop 并不完全使用经典的引导字形图标类，而是使用一些自定义类。在您的示例中，您可以使用 <td> <button type="button" class="btn btn-default btn-lg"> <span class="icon icon-cloud-download"></span> </button> </td> 要恢复，您只需将 glyphicon 替换为图标即可。祝你好运

html prestashop-1.6 glyphicons

回答 2 投票 0

CSS @font-face 在生产中不渲染图标（相反它只显示 unicodes）在本地工作正常

我正在尝试在我的 Angular 应用程序中呈现 Icomon 库中的图标。我怀疑它是如何包含我的 CSS 文件的问题使用 icomon 字体的 index.html 页面，我们有...

css angular unicode font-face glyphicons

回答 1 投票 0

如何使用 Twitter Bootstrap 将 Glyphicons 水平居中

我正在尝试将我的 FontAwesome 图标置于我的 Twitter Bootstrap 代码中。这是我的 HTML：我正在尝试将我的 FontAwesome 图标置于我的 Twitter Bootstrap 代码中。这是我的 HTML： <div id="frontpage-content" class="content"> <div class="container"> <div class="row"> <div class="col-lg-4"> <span> <i class="fa fa-camera-retro fa-5x"></i> </span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, inventore, ipsa dolorum laborum sit alias iusto nam quibusdam ad distinctio rerum expedita autem itaque delectus iste mollitia perferendis sint libero accusamus in. Enim, natus necessitatibus pariatur optio explicabo consequuntur quod!</p> </div> <div class="col-lg-4"> <i class="fa fa-camera-retro fa-5x"></i> <p>Ut, aliquid, aperiam, veniam modi voluptates maiores nesciunt libero fugiat illum recusandae cum similique et alias possimus error ex tenetur quasi sint eius dicta officia earum eveniet suscipit corporis autem deleniti nihil sed! Earum blanditiis vel similique nisi fugit reprehenderit?</p> </div> <div class="col-lg-4"> <i class="fa fa-camera-retro fa-5x"></i> <p>Quisquam eos aperiam autem atque minus modi similique earum! Ab, laboriosam odit non quo officiis asperiores atque dolorum omnis vitae in qui officia sequi molestias quisquam velit exercitationem aperiam. Voluptatum, unde, nesciunt temporibus voluptates sint ab architecto at quod dolore.</p> </div> </div> </div> 这是我已经尝试过的： #frontpage-content { background-color: $bgDefault; i { text-align:center; } span { text-align:center; } } 完美适用于文本，但不适用于i元素。我知道我可以将它居中，如果我给周围的 div 一个静态宽度，然后将 i 元素定位为... margin-right: auto; margin-left: auto; display: block; ...但我不想给周围的 div 一个静态宽度。那么，如何在不应用静态宽度的情况下解决这个问题？编辑：我也知道center HTML元素，但这不是CSS，因此不是很方便。所有你需要的是在你的容器display:block中用text-align:center定义idiv你就会拥有它： .col-lg-4 i { display:block; text-align:center } 这里有演示编辑 #1：由于这个答案似乎得到了一些关注，因此值得注意的是，更多的“twitter-bootstrapy”方法是 @SimoneMelloni 在他们对这个问题的回答中所建议的，即。 text-center 类的使用。请注意，这与我的解决方案基本相同，考虑到所有text-center所做的设置text-align:center，它只是利用了推特引导功能。另请注意，text-align:center仅适用于块级元素或您明确设置display:block的元素，如我上面的原始答案。在那里我需要指定它，因为我在 i 标签上使用它，这是一个内联元素. 编辑 #2：我刚刚在 center 元素上看到您的 [OP] 编辑：虽然它确实不是 CSS 而是 HTML，但这不是什么大问题，但更大的问题是它已经过时了。在 MDN 的 <center> 元素文档中查看更多信息 <div class="text-center"> <i class="fa fa-camera-retro fa-5x"></i> </div> 没有打开 css 文件就成功了

html css twitter-bootstrap font-awesome glyphicons

回答 2 投票 0

有没有办法在 Bokeh 散点图上绘制图像而不是圆点？

我正在绘制一些足球射门数据。我有每个镜头的位置（根据 x、y 坐标），数据库包含 4 种不同类型的镜头。在我下面的代码中，我使用了 4 个不同的...

python image bokeh scatter-plot glyphicons

回答 0 投票 0

如何自定义农业网格图标？

我正在尝试在ag-grid中实现一些自定义，例如：更改Grid Header的图标-排序图标，Filter Menu图标，Filter Menu中不同菜单项的图标，等等。更改...的位置...]]] >

aurelia ag-grid glyphicons

回答 1 投票 2

如果我仅使用Boostrap的在线CDN源文件，为什么所有字体（例如glyphicon图标）都正确加载？

如果我将所有内容复制并粘贴到Microsoft Visual Studio代码中，则以下Plunker代码（https://embed.plnkr.co/KpVqaiblOKGk5K6VWmi4/）效果很好。一旦我离线使用Bootstrap源文件...