Question

我有svg图标svgIcon的来源。我需要将此图标添加到按钮。它看起来非常类似于

我试过了：

CSS

php bin/console make:crud

但结果如下：

如何在旁边的按钮和文字说明中使用svg图标？

Answer 1

尝试增加padding-left并设置图标的background-size。不需要background-repeat到repeat-y，而是使用no-repeat。

.btn {
     border: none;
     color: grey;
     padding: 12px 16px 12px 36px; // Changed padding-left value, set as per your requirement
     font-size: 16px;
     cursor: pointer;
     background-image: url("http://alexfeds.com/wp- 
     content/uploads/2018/04/save_icon.svg");
     background-size: 25px auto; //Set as per your requirement
     background-repeat: no-repeat; // Changed
 }

Answer 2

我通常使用伪元素。请检查以下结果：

LSSupportsOpeningDocumentsInPlace

.btn {
     border: none;
     color: grey;
     padding: 12px 16px;
     font-size: 16px;
     cursor: pointer;
 }
 
 .btn:before {
   content: url(http://alexfeds.com/wp-content/uploads/2018/04/save_icon.svg);
   width: 20px;
   float: left;
   margin-right: 5px;
   margin-top: -2px;
 }

Answer 3

＆＃13;

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>com.earnix.eo</groupId>
        <artifactId>EOParent</artifactId>
        <version>8.8.4.0-SNAPSHOT</version>
        <relativePath>../EOParent/pom.xml</relativePath>
    </parent>
    <artifactId>PricingBatch</artifactId>
    <name>PricingBatch</name>

    <properties>
        <websphere.folder>C:\ibm\WebSphere\AppServer</websphere.folder>
    </properties>

    <packaging>jar</packaging>
    <dependencies>
        <dependency>
            <groupId>com.earnix.eo</groupId>
            <artifactId>Tools</artifactId>
            <version>${project.version}</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.earnix.eo</groupId>
            <artifactId>EarnixShared</artifactId>
            <version>${project.version}</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.earnix.eo</groupId>
            <artifactId>EOGUI</artifactId>
            <version>${project.version}</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.earnix.eo</groupId>
            <artifactId>EOSessions</artifactId>
            <version>${project.version}</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.earnix.eo</groupId>
            <artifactId>EOUtils</artifactId>
            <version>${project.version}</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.sample</groupId>
            <artifactId>sample1</artifactId>
            <version>1.0</version>
            <scope>system</scope>
            <systemPath>${websphere.folder}\lib\bootstrap.jar</systemPath>
        </dependency>
        <dependency>
            <groupId>com.sample</groupId>
            <artifactId>sample2</artifactId>
            <version>1.0</version>
            <scope>system</scope>
            <systemPath>${websphere.folder}\runtimes\com.ibm.ws.webservices.thinclient_8.5.0.jar</systemPath>
        </dependency>
        <dependency>
            <groupId>com.sample</groupId>
            <artifactId>sample3</artifactId>
            <version>1.0</version>
            <scope>system</scope>
            <systemPath>${websphere.folder}\java\jre\lib\xml.jar</systemPath>
        </dependency>
        <dependency>
            <groupId>com.sample</groupId>
            <artifactId>sample4</artifactId>
            <version>1.0</version>
            <scope>system</scope>
            <systemPath>${websphere.folder}\java\jre\lib\ibmorb.jar</systemPath>
        </dependency>
    </dependencies>

    <build>
        <finalName>PricingBatch</finalName>
        <plugins>
            <plugin>
                <artifactId>maven-assembly-plugin</artifactId>
                <configuration>
                    <archive>
                        <manifest>
                            <mainClass>com.earnix.tools.batchpricing.Main</mainClass>
                        </manifest>
                    </archive>
                    <descriptorRefs>
                        <descriptorRef>jar-with-dependencies</descriptorRef>
                    </descriptorRefs>
                    <appendAssemblyId>false</appendAssemblyId>
                </configuration>
                <executions>
                    <execution>
                        <id>make-assembly</id> <!-- this is used for inheritance merges -->
                        <phase>package</phase> <!-- bind to the packaging phase -->
                        <goals>
                            <goal>single</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

＆＃13;

.custom-btn .ico-btn {
    color: grey;
    padding: 12px 16px 12px 40px;
    background:url(http://alexfeds.com/wp-content/uploads/2018/04/save_icon.svg) no-repeat 13px 9px;
    background-size: 25px auto;
    background-color:#eaeaea;
 }

＆＃13;

Answer 4

多种选择

.btn {
 border: none;
 color: grey;
 font-size: 16px;
 cursor: pointer;
 padding: 12px 16px;
 }

 .btn:before {
 content: "";
 display: block;
 background:url("http://alexfeds.com/wpcontent/
 uploads/2018/04/save_icon.svg") no-repeat;
 width: 16px;
 height: 16px;
 float: left;
 margin: 0 6px 0 0;
 }
 .btn2 {
 border: none;
 color: grey;
 padding: 12px 16px 12px 50px;
 font-size: 16px;
 cursor: pointer;
 background-image: url("http://alexfeds.com/wp- 
 content/uploads/2018/04/save_icon.svg");
 background-repeat: repeat-y;
 }

 a {
 text-decoration: none;
 color: #515151;
 display: inline-block;
 background-color: #dfdfdf;
 padding: 12px 16px;
 }
 a:before {
 font-family: FontAwesome;
 content: "\f15b";
 display: inline-block;
 padding-right: 10px;
 vertical-align: middle;
 font-size: 20px;
 }

演示 - jsfiddle

如何将svg图标添加到带有文本的按钮

4 个答案: